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 {
border: 1px solid #66CCFF;
background-color: #D7F2FF;
padding: 10px;
font-family: "Trebuchet MS", "Lucida Sans Unicode", "Lucida Grande", "Lucida Sans", Arial, sans-serif;
font-size: x-large;
line-height: 35px;
width:350px;
}
</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 {
background:#FF99CC;
color: #FFF;
}
#mainContent p::-moz-selection {
background:#FF99CC;
color: #FFF;
}
#mainContent p::-webkit-selection {
background:#FF99CC;
color: #FFF;
}

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 {
background:#FF99CC;
color: #FFF;
}}

The selection pseudo-element goes after your selector:

#mainContent p::selection {
background:#FF99CC;
color: #FFF;
}

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 {
background:#FF99CC;
color: #FFF;
}

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.

If you have a question about this or any other topic, the easiest thing is to drop by our forums where a bunch of the friendliest people you'll ever run into will be happy to help you out!

THE KIRUPA NEWSLETTER

Get cool tips, tricks, selfies, and more...personally hand-delivered to your inbox!

( View past issues for an idea of what you've been missing out on all this time! )

WHAT DO YOU THINK?

NEWSLETTER

No spam. No fluff. Just awesome content sent straight to your inbox!

Awesome and high-performance web hosting!
BACK TO TOP
new books - yay!!!