Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Text Selection Highlighting too much

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

Text Selection Example

http://jsfiddle.net/JamesKyle/pA7BJ/

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/

like image 818
James Kyle Avatar asked Jul 28 '12 19:07

James Kyle


People also ask

How do I stop my text from highlighting?

Remove highlighting from part or all of a document Select the text that you want to remove highlighting from, or press Ctrl+A to select all of the text in the document. Go to Home and select the arrow next to Text Highlight Color. Select No Color.

Why does my text keep highlighting?

What appears to be highlighted text might actually be character shading. There are lots of ways that users can format text in MS Word. As such, try removing the highlighting by selecting the text and clicking the Clear Formatting option on the Home tab.

Why does word highlight more than I want?

Go to File, Options, then Advanced. Look for the option When selecting, automatically select entire word (it is enabled by default). You can disable the 'feature' by deselecting it (checkbox). Have something to add to the explanation?

How do you stop text highlighting in CSS?

To disable text selection highlighting in Google Chrome browser using CSS just set -user-select CSS property to none.


1 Answers

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

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

http://jsfiddle.net/LJLdW/

Don't know if that is possible in your situation.

like image 172
Sebastian vom Meer Avatar answered Oct 02 '22 19:10

Sebastian vom Meer