Change the color of selected text

A nifty little detail in html5 is that you can change the color of selected text, which is usually blue. It's just one of those details that webdesigners usually forget.

You can change the color of the selection using the following css:

::selection {
    background-color: red;
    color: #fff;
}
::-moz-selection {
    background-color: red;
    color: #fff;
}

The ::selection is used by most modern browsers, except for Firefox. The latter uses its own selector ::-moz-selection. I read an article that wrote they cannot be combined. As such, the following will NOT work:

::selection, ::-moz-selection { /* You can't combine like this */
    background-color: red;
    color: #fff;
}

(No Ratings Yet)

Loading...