Quick CSS Tip: Control The Color of Highlighted Text In Your Website

If you are the type of designer who thinks that any single pixel or color can make or brake your website here is a quick tip I think you’ll appreciate.

The Effect

Most of the time when you highlight/select text in a website the color you computer uses is blue for the background with white for the text. As a web developer however you can change this color for your website to improve visibility, specially if you’ve decided to use a dark color.

The Code

To do this you need the CSS pseudo class "::selection", here an example that will make any highlighted text have an orange background with white font.

/* firerox */ 
::-moz-selection
{  
 background:#FFCC11;  
 color:#ffffff;  
}  
/* webkit*/
::selection{ 
 background:#FFCC11;  
 color:#ffffff;  
}  

blog comments powered by Disqus