Change Browser Highlight Colour

In this tutorial today you will learn how you can change the default browser highlight colour by using CSS.

If you take your mouse, click and drag your mouse on the page you will highlight the text. Different browsers will highlight this in different ways, in my browser the text becomes white and the background becomes orange.

Using the CSS selector ::selection you can change the style of the highlighted text. This can be used for different reasons, you can use it to make your website styling more unique or use it in a way to protect your text from being copied by making it difficult for people to see what they are highlighting.

To use this try the following code snippet.

/* webkit, opera, IE9 */
.blue::selection { 
	background:blue;
}
/* mozilla firefox */
.blue::-moz-selection { 
	background:blue;
}

/* webkit, opera, IE9 */
.red::selection { 
	background:red;
}
/* mozilla firefox */
.red::-moz-selection { 
	background:red;
}

/* webkit, opera, IE9 */
.hide::selection { 
	background:white;color:white;
}
/* mozilla firefox */
.hide::-moz-selection { 
	background:white;color:white;
}

View the demo to see it in action.

Selection Demo

Advertise here 50% Off

Comment