Changing the text selection color with CSS3

05 September 2011

Changing the appearance of selected text is mostly a nice-to-have, but sometimes even necessary to imprive legibility.

Most of the browsers today support styling the text selection, and older browsers just show the regular text selection when the tag isn't recognized, so it's completely safe to use. You can find a list of supported browsers on Quircksmode.

This is an image of the selected text styling used on this site. You can try if your browser supports selection styling by selecting this text.



The CSS code for this style is rather easy:

::selection         {
    color: #FFFFFF;
    background: #A800FF;
    text-shadow: none;
}
::-moz-selection    {
    color: #FFFFFF;
    background: #A800FF;
    text-shadow: none;
}

It sets the background color to purple, and the text color to white. It's also recommended to set the text-shadow to none, because text shadows look kind of funny on a selected text.
You must have JavaScript enabled to use this form!

Leave a comment!

  1. Your mail is safe with me. It's only only used to display your Gravatar image!

0 comments

Please feel free to be the first to comment on this page!

By placing a comment you let me know i'm doing a good job. It doesn't have to be constructive, just a "awesome!" makes me really happy! You contribute to a better world!