Use seclection in css

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:

[ 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:

[ 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.

Get started

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

 










I spent about 15 minutes trying to put something witty or insightful in this area. I clearly failed.

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;
}