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;
}
© GeekLabInfo Change the color of selected text is a post from GeekLab.info. You are free to copy materials from GeekLab.info, but you are required to link back to http://www.geeklab.info

1 Star2 Stars3 Stars4 Stars5 Stars (No Ratings Yet)
Loading...

Leave a Reply