CSS3 ::selection selector - how to change background colour of selection (CSS)

CSS3 ::selection selector - how to change background colour of selection (CSS)

Did you notice that selected text on some websites has a different colour (not blue) as well? Not? That's because the vast majority of websites use the default color.

Changing the colour for some better one not only makes youru website look cooler, but it's also very effective way of improving your text's readability. I think that restylling the selecting color should always be a part of a web design. How to, you ask? CSS selector ::selection is what you're looking for.

Changing selection colour using CSS

All you need to know is the selector ::selection. For Mozilla Firefox, you have to use the mozilla prefix (moz-). The FF selector looks like this ::-moz-selection.

::selection         { styles }
::-moz-selection { styles }

Using CSS selector ::selection

It's pretty simple actually. If you look closely at any selected text and think about it for a while, you notice it's only background-color property (blue background) together with color property (white font).

On my website, I changed the background colour to green (#5fa94e) and set the text colour to white (#fff). The code for this tweak follows:

::selection         { background:#5fa94e; color: #fff; }
::-moz-selection { background:#5fa94e; color: #fff; }


<< Back to the previous page

Write a comment
 If you cann't see the verification code clearly.
Type the characters into the text field below(*)
This website uses cookies for ads, just like any other website. Further information