03
May

Simple CSS: Custom Highlighted Text



Here’s a quick little “How-To” that adds a nice little touch to a webpage or website design. It allows you to change the colors of user highlighted text using CSS3. To test it out highlight the text below:

This is Red | This is Orange | This is Green | This is Blue

NOTE: This trick isn’t compatible with Internet Explorere 8 or below but it does work with most other modern browsers. To do this you use three simple CSS selectors:

::selection

::-moz-selection

::-webkit-selection

Then you simply define the background color and the font color you would like.

::selection{

background-color: #A50D1A;

color:#FFF;

}

::-moz-selection{

background-color: #A50D1A;

color:#FFF;

}

::-webkit-selection{

background-color: #A50D1A;

color:#FFF;

}

One important thing to note is that in order for the style to work across all modern browsers you must use each selector.  The selector works just like any other and could be used in conjunction with an id, class, or specified element. For example, I’ve provided the code for the demo at the beginning of this blog post. Click here to download the demo code.

 

Tags: , , , , , , ,

Leave your comment

*