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 http://i.imgur.com/NmZIf.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>
The colour of selected text can be easily changed by using the CSS | ::selection Selector. In the below code, we have used CSS ::selection on <h1> and <p> element and set its colour as yellow with green background.
You can change the background color and color of selected text by styling ::selection . Styling this pseudo element is great for matching user-selected text to your sites color scheme.
Most of the browsers by default highlight the selected text in a blue background. This can be changed by using the ::selection pseudo selector in CSS.
Text-color property is used to set the color of the text. Text-color can be set by using the name “red”, hex value “#ff0000” or by its RGB value“rgb(255, 0, 0).
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
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With