I developed a CSS code specifically for my blogspot site to organize and store all of my code and technical snippets.
.code {
background:#dae6ef;
background-repeat:no-repeat;
border: solid #5C7B90;
border-width: 1px 1px 1px 20px;
color: #000000;
font: 13px 'Courier New', Courier, monospace;
line-height: 16px;
margin: 10px 0 10px 10px;
max-height: 200px;
min-height: 16px;
overflow-y: auto;
padding: 10px 5px 5px;
width: 90%;
}
.code:hover {
background-repeat:no-repeat;
}
When attempting to select text within the code box on my webpage, it currently selects all text on the page instead.
This is how it looks currently: https://i.stack.imgur.com/lldmt.png
What I actually want is for it to only select the content within the code box when I press CTRL + A.
Here's what I'm aiming for: https://i.stack.imgur.com/n5TrD.png
Can this be achieved through CSS? Keep in mind that I have no formal background in CSS; I simply found this code online.