CSS Code To Change The Highlight Color of Selected Text

The default highlight color of selected text in all browsers is the navy color. Wouldn’t it be great if the color of the highlight in the selected text on a website matches the color scheme of the website?

css-code-custom-text-highlight-color

Here’s the code to change the highlighted color text,

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

Just change the hex color codes to match the color scheme of your website.

Note that at the time of writing, the tip to change the highlight color of selected text will work in Chrome, Firefox, Safari, Opera and latest version of Internet Explorer. Older versions of Internet Explorer doesn’t support it.

Leave a Comment