Changing the text selection color using CSS?
css, html
Solution
I have wandered upon this problem before and it turns out:
::selection (or whatever selection you might use)
does not work on an break line tag (br).. remove them and use margins instead. =) Here is an fiddle to demonstrate: Example
Problem
I'm currently working on a website, and I want to change the text selection color. I have it somewhat working. This is (part of) the code in my stylesheet: ``` ::selection { background: #FF0099; color: black; text-shadow: none; } ::-moz-selection { background: #FF0099; color: black; text-shadow: none; } ``` It produces a mostly satisfying result. However, in some cases, the highlighting seems to lose its given color (of #FF099), as shown in this picture: As you can see in the picture above, the text is entirely highlighted using the correct color (#FF099); however, the area between the body text and the title, as well as to the left of the body text, is highlighted with the default color (of blue). How can I keep parts of the highlighting from going back to the default? edit: larger picture available at https://i.stack.imgur.com/BmSiq.png a snippet: ``` ::selection { background: #FF0099; color: black; text-shadow: none; } ::-moz-selection { background: #FF0099; color: #EEE; text-shadow: none; } ``` ``` <p>sample</p> <br /> <p>sample2</p> ```