In the image above, the red selection crosses outside of the yellow area when selecting. I would like to only select within the yellow part as shown below:
Here is the HTML:
<div id="parent">
<div id="child">
This is some content... This is a long lonnnnnnng content.
</div>
</div>
For the CSS:
#parent {
width: 200px;
background-color: #666;
}
#child {
padding: 50px;
background-color: #ff0;
}
::selection {
background-color: #f00;
}
Can you help me achieve this?
Test code at: http://jsfiddle.net/3AESf/