Custom Website Selection Colors

CSS provides an easy way to style the user’s selected or highlighted elements using the ::selection pseudo-element.

::selection {
    color: white;
    background: purple;
}

Try it out:

Note that background is a shorthand for multiple background-* properties, with background-color being the first one.

Browser Support

According to Can I use, about 83% of users are on browsers that support this feature. iOS Safari is the notable holdout.

Specific Styling

The previous example applies the changes to the entire page, but you can also limit them to specific elements using standard selectors.

.iron-man::selection {
    color: #beba46;
    background: #790d0d;
}

.incredible-hulk::selection {
    color: #bf80ff;
    background: #70964b;
}

.thor::selection {
    color: #e63900;
    background: #363636;
}

Try it out:

Continue the discussion on Medium, on Reddit, or in the comments below.