November 10, 2014 in CSS

Change color of text on selection

You can change color of text on selection using CSS, you can also change background color of selected text to highlight it on selection.

CSS code:

::selection {
    background:#04A4CC;
    color:#FFF;
    text-shadow:none;
}
::-webkit-selection {
    background:#04A4CC;
    color:#FFF;
    text-shadow:none;
}
::-moz-selection {
    background:#04A4CC;
    color:#FFF;
    text-shadow:none;
}

Issue:

It do not work if you combine the selectors. That’s because browsers ignore the entire selector if there is a part of it they don’t understand or is invalid.

Browser Support:

It works in all major browsers, including IE9+
Not supported in iOS 8.1 (Safari) and Opera Mini 8