10th November 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

About the author

Alok Jain

Alok design digital experiences to help businesses achieve their goals. He is passionate about designing right User Experience for their customers. For over 15 years, he have worked with small startups to mature product teams. Whether it is designing a WordPress product, a frontend experience, WooCommerce, Shopify, he follow the best product development practices for design and code, for desktop or mobile.