Text Selection Highlighting too much on either side because of padding. http://jsfiddle.net/JamesKyle/pA7BJ/ How do

Question

Editorial Team

Asked: June 9, 20262026-06-09T09:29:24+00:00 2026-06-09T09:29:24+00:00

Text Selection Highlighting too much on either side because of padding.

Text Selection Example

How do I fix this using CSS? I’ve tried a bunch of different things, none of which seem to work. (i.e. trying to use margin and other properties).

I’ve run into this issue several times and have never been able to figure it out.

If someone could show me how to fix this and maybe explain how the text selection highlight is calculated, I would very much appreciate it.

It appears that this isn’t occurring in Firefox/Opera (can’t test IE), and it may be limited to webkit-based browsers.

SOLVED:

Add position: relative to any padded elements (this is likely a webkit bug).

http://jsfiddle.net/JamesKyle/ejfsM/

You must login to add an answer.

Need An Account,

Editorial Team · Answer 1 · 2026-06-09T09:29:25+00:00

Editorial Team

This is strange. However, changing CSS position seems to work, e.g.:

div.sizing-container {
    padding: 75px;
    position: relative;
}

The Archive Base Latest Questions