CSS text selection custom styling

In CSS3 we are able to change the style of standard (browser default) text selection. It always requires two CSS rules:

• with -moz- prefix for Firefox browser
• second for other browsers (without prefix)

You can see the examples below or: watch live demo

This CSS feature to change text selection can be useful in many situations. Mostly then, when it is required by the graphic design. Or just when you want to make some nice and interesting feature on your website or web application.

CSS selections custom styles

Using this CSS rules you will style selections on the whole page for a whole content which is present on your webiste or web app. This can be good, but it changing selection color for whole content of the website can be a not good solution. In my opinion it is better to add this custom CSS styles just for a text selection, not whole content (read further to next examples).

::-moz-selection {
    background: #000;
    text-shadow: none;
    color: #FFF;
}
::selection{
    background: #000;
    text-shadow:none;
    color:#fff
}

Only text paragraph selection custom CSS styling

You can define different styling for specific elements using ::selection pseudo-element. This is easy to use, just to add mentioned CSS selector to another selector (e.g. class or whole HTML tag) and  we can have in place changed color of the selection just for a part (text) of the website.

p::-moz-selection {
    background: #000;
    color: #F00;
}
p::selection{
    background: #000;
    color:#F00;
}

CSS text selection custom styling with text-shadow

To modify CSS text selections styles you can use only a few properties like: color, background, text-shadow (except IE11 or earlier) or outline.

p.extra-styling::-moz-selection {
    background: #0DDB00 none repeat scroll 0% 0%;
    text-shadow: 1px 1px 1px #000;
    color: #F9F487;
}
p.extra-styling::selection{
    background: #0DDB00 none repeat scroll 0% 0%;
    text-shadow: 1px 1px 1px #000;
    color: #F9F487;
}

CSS text selection styling without background

You can also make a CSS text selection styles without background.

p.no-background::-moz-selection {
    background: none;
    text-shadow: 1px 1px 1px #000;
    color: #F98787;
}
p.no-background::selection{
    background: none;
    text-shadow: 1px 1px 1px #000;
    color: #F98787;
}

I hope that this article was helpful for you. If you want to check how it works in details, please Watch live demo.