How to Change the Colors of Highlighted Text

In most browsers, the default colors for highlighted text are white letters on a blue background. If you highlight this paragraph, that is what you should see. However, using CSS3, you can change the both the background color and text color of a text selection. You can use this to your advantage by choosing colors that complement your website design.

Selection color is part of the CSS3 standard and is currently supported by Firefox, Chrome, Internet Explorer 9, Opera, and Safari. The highlighting color will not change in older versions of Internet Explorer. Firefox requires its own code with -moz- prefix, so you will have to write the same code twice to get the effect in every browser.

First, create a new CSS class for selection. In this example, we will call the class "xxx" and write the codes for both Firefox and Chrome/Opera:



Next, within the braces, write the CSS code for the background and text colors. For the sake of demonstration, we will choose a light green background color and magenta text. In practice, it is better to choose colors with higher light/dark contrast and avoid colors that are too bright.

© Had2Know 2010