I've been using the following CSS3 option to change the highlight color of text on a webpage. However, the only element on the webpage is a textarea, and the following CSS doesn't seem to do anything.
::selection { background:#B9B9B9; color:#000000; }
Am I doing it wrong? Is it possible to change the highlight color of a textarea? Or am I just wasting my time?
You can't actually highlight text in a <textarea> . Any markup you would add to do so would simply display as plain text within the <textarea> . The good news is, with some carefully crafted CSS and JavaScript, you can fake it.
The Basics. It's pretty simple. To change the color of the highlighted-text, simply target the ::selection selector and then define the color of the background property.
How Do I Highlight Text In CSS? To Highlight text in HTML you have to use an inline element such as the <span> element and apply a specific background style on it. This will create the highlighting effect, which you can tweak in many different ways to create different looks.
Highlight selected text Select the text that you want to highlight. Go to Home and, select the arrow next to Text Highlight Color. Select the color that you want.
Try using the vendor extension versions -moz-selection
and -webkit-selection
:
::selection { background:#B9B9B9; color:#000000; }
::-moz-selection { background:#B9B9B9; color:#000000; }
::-webkit-selection { background:#B9B9B9; color:#000000; }
Note that the selection pseudo has been removed from the current draft.
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