How to change background color and text color of selected text or highlighted region of your website or blog

 

When you select any content or text on any webpage generally you will get blue background color with white text color i.e. default browser or webpage selection color. But you can make your website look beautiful by changing highlighted or selected color of your website with a css trick to the one which sets on your theme perfect. Here is a css code to change background colour and text colour of selection of your webpage. I have practically implemented this colour on some of my websites and blogs and its working fine and adding more attractiveness to the webpages. This method works fine with almost all modern browsers like Mozilla Firefox, Google Chrome, Safari, Opera except for IE.
Just copy and paste this code on your .css file or stylesheet of your website.

::selection {
	background:#C33;
	color: #fff;
	}
::-moz-selection {
	background: #C33; 
	color: #fff;
}

This code will select default selection background and text color on your webpage to your choice.
To apply this coding scheme to different classes you can use it like:
This will change Selection color and text color of <H1> header with class “red” only.

h1.red::selection {
	background:#C00;
	color:#9F0;
}
h1.red::-moz-selection {
	background:#C00;
	color:#9F0;
}

This will change Selection color and text color of <H2> header with class “blue” only.

h2.blue::selection {
	background: #03c;
	color:#9F0;
}
h2.blue::-moz-selection {
	background:#03C;
	color:#9F0;
}

This will change Selection color and text color of paragraph <P> with class “yellow” only.

p.yellow::selection {
	background: #fff2a8;
	color:#C30;
}
p.yellow::-moz-selection {
	background:#FF0;
	color:#C30;
}

You can use this code in many other styles, just modify these codes and colors according to your website theme and content and amaze visitors with your amazing style and creativeness.

If you enjoyed this article, please consider sharing it or leave a comment.

Related Posts Plugin for WordPress, Blogger...

Leave a Reply

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

*

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>