How to Change The Default Text Selection Color Using CSS3

text_selection

Before CSS3, there wasn’t really a way to change the default blue text selection color when you highlight some text on a webpage. With current browsers and more support for CSS3, it has been really simple to change the look and color of the text selection.

[CSS]
::selection {
background:#ffff33;
}

::-moz-selection {
background:#ffff33;
}

::-webkit-selection {
background:#ffff33;
}
[/CSS]

By using the above example, it will change the background color of your selected text to yellow instead of the default light blue.

As you probably noticed, Firefox and Webkit-based browsers (Chrome and Safari) have their own syntax, though the latest versions should now support the normal ::selection pseudo-element syntax.

Browser Support

  • Firefox 1.0+
  • Chrome 1+
  • IE9+
  • Opera 9.5+
  • Safari 1.1+

One thought on “How to Change The Default Text Selection Color Using CSS3

Leave a Reply

Your email address will not be published. Required fields are marked *