Changing Selection Color using CSS

by kirupa | 21 August 2011

Have questions? Discuss this HTML5 tutorial with others on the forums.

Something cool that you can do using just CSS is change the selection color when you are range selecting content.

Normally, the selection color is whatever your browser default is:

the default highlight color when you are selecting things

[ yaaaaawn... ]

By using the selection CSS pseudo-element, you can easily define a different highlight background color as well as the color of the text being highlighted:

text highlight color

[ you can see a live example here ]

In this short article, you will learn how to use the selection pseudo-element to create your own highlight color different from what the browser creates.

Getting Started

First, create a new HTML page and paste the following code:

<!DOCTYPE html>
<html lang="en-us">

<head>
<meta content="en-us" http-equiv="Content-Language">
<meta charset="utf-8">
<title>Selection Color Example</title>
<style type="text/css">
#mainContent {
}
</style>
</head>

<body>
<div id="mainContent">
<p>I spent about 15 minutes trying to put something witty or insightful in this area. I clearly failed.</p>
</div>

</body>
</html&>

If you preview this page in its current state and select some text, all you will see is what you saw in the first image towards the top of this page. The selection color is your browser/OS default. Let's fix it so that you get the page to look more like the second one with a custom selection color!

Changing the Selection Color

To change the selection color, you will need to use the selection pseudo-element. Go ahead and paste the following CSS rules below your mainContent rule:

#mainContent p::selection {
}
#mainContent p::-moz-selection {
}
#mainContent p::-webkit-selection {
}

If you preview your page now and highlight the text, you will see the selection with a pink background and a white foreground color. Wohoo!

Let's look at the CSS you pasted in greater detail. The first half of the selector is pretty straightforward. I am specifying that the rule applies to p tags that live inside an element whose id is mainContent:

#mainContent p::selection {
}}

The selection pseudo-element goes after your selector:

#mainContent p::selection {
}

This pseudo-element marks this entire style rule as being related to the selection of content. When it comes to modifying your selection, you can only specify the background color of the selected content and the foreground color of the selected content.. You can't change anything else during your selection.

As you can imagine, this greatly limits the number of CSS properties you can use:

#mainContent p::selection {
}

You can use the background or background-color property to specify the background color of your selection, and you can use the color property to specify the color of the highlighted text.

Once you have made those changes, your selection background and foreground color will look custom and unique to your design.

Conclusion
Changing the selection color of your content is pretty easy. The selection pseudo-element was originally a part of the W3C spec, but it has been removed recently. Despite its removal from the spec, all of the browser vendors support it, so you should feel free to use it. Thanks to @krilnon for linking to the MDN docs that clarified the selection pseudo-element's future.

Just a final word before we wrap up. If you have a question and/or want to be part of a friendly, collaborative community of over 220k other developers like yourself, post on the forums for a quick response!

Kirupa's signature!

Need help?

Ask on the forums!

Customize Theme

Changing Selection Color using CSS

Getting Started

Changing the Selection Color

The KIRUPA Newsletter

Follow:

Popular

Loose Ends