Danny Guo | 郭亚东

Custom Website Selection Colors

Updated on  ·  Published on
120 words  ·  ~1 minute to read

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.


← The Decline of the MacBook Pro Migrating from Jekyll to Hugo →

Follow me on Twitter or subscribe to my free newsletter or RSS feed for future posts.

Found an error or typo? Feel free to open a pull request on GitHub.