CSS

Change Browser Highlight Colour With CSS

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

Back to top ^

Join Paulund

  • Get access to 100s of premium tutorials and downloadable content
  • Members content consists of Premium WordPress plugins, CSS packages, jQuery packages, tutorial demo files and templates for 100s of web development tutorials
  • In-depth development tutorials
  • Priority tutorial requests
  • Priority email development support
  • No ads

Here at Paulund you'll find Web Development tutorials and snippets focusing mainly on PHP, WordPress and CSS. Members will get access to premium tutorials that go into more detail about development with these languages. You will also get access to downloadable premium content based on the tutorial.

Join Paulund

Leave a Reply

Your email address will not be published. Required fields are marked *