Change Selection Color of Text using CSS

Written by Saran on September 30, 2012, Updated January 30, 2015

If you want to change the default highlighted color of the text in a webpage, just use CSS3 ::selection Selector to achieve the result. ::selection will match the selected text and override the default text highlight color with the one provided by you. For example, the following CSS code will replace the default text highlight color of a whole webpage to "GreenYellow". Just place this code within your CSS section to see the result on your webpage.

CSS

<style type="text/css">
::selection{
  background: GreenYellow;
  color: #222222;
}

::-moz-selection {
  background: GreenYellow;
  color: #222222;
}
</style>

Using Different highlight colors

To use different highlight colors for different selection of your page (eg. paragraph 1 and paragraph 2), you can change your CSS code to something like this :

CSS

<style type="text/css">
p.para1::selection{
  background: GreenYellow;
  color: #222222;
}
p.para2::selection{
  background: Khaki;
  color: #222222;
}
</style>

Where your HTML code can be :

HTML

<p class="para1">
Paragraph 1 : Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. 
</p>
<p class="para2">
Paragraph 2 : Nullam sagittis nec dui eget lobortis. Donec placerat mattis congue. 
</p>

Demo

Select text below to try :

Paragraph 1 : Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Phasellus ac felis aliquet, gravida neque non, vulputate velit. Etiam semper ligula a pulvinar ultricies.

Paragraph 2 : Nullam sagittis nec dui eget lobortis. Donec placerat mattis congue. Nullam ac blandit purus, ac accumsan quam.