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.

Getting Help

If you have questions, need some assistance on this topic, or just want to chat - post in the comments below or drop by our friendly forums (where you have a lot more formatting options) and post your question. There are a lot of knowledgeable and witty people who would be happy to help you out

Share

Did you enjoy reading this and found it useful? If so, please share it with your friends:

If you didn't like it, I always like to hear how I can do better next time. Please feel free to contact me directly via e-mail, facebook, or twitter.

Brought to you by...

Kirupa Chinnathambi
I like to talk a lot - A WHOLE LOT. When I'm not talking, I've been known to write the occasional English word. You can learn more about me by going here.

Add Your Comment (or post on the Forums)

blog comments powered by Disqus

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