11 February 2013

Change Default Text Selection Color in CSS

When you copy a certain phrase, word, or paragraph to paste it in other destination, you will notice the  HIGHLIGHT color. Yes, you have guessed it, when you highlight it, it has a Background color of blue, and a color of white on text

Now, if you are tired of seeing that color, you change change it in CSS.

Now, i am nearly back to the programming world and i would probably say, Hello World, Again! 
Default text selection
As technology innovates and emerges, CSS had updated to CSS3 technology, and one of the coolest declarations i have tried is this Selection,  because now, you can change system or browser text selection color and override its highlight color of your own color of choice. Amazing!

CSS3 Declaration
Don't worry about old browsers, it will just ignore the declaration.

Now, lets try some. Here, i have a screenshot of red highlight and a color white texts. Note, you can choose any colors here.

Red highlight selection in which i used it here in my blog. :)
The code:

::-moz-selection, ::selection {
    background-color: #dd2020;
    color: #fff;

I both choose to declare with the same attributes. 

Moz selection pertains to mozilla firefox and just selection to safari.. but it works pretty well in chrome.
 ::-moz-selection {  /* Firefox */ }

::selection {  /* Safari */ }
However, if you want to customize just a certain paragraph to change its highlight color, you can set it in different classes.

For red:
p.red::selection, p.red::-moz-selection { background: #ff0000; color: #ffffff; }
For green:
p.green:selection, p.green:-moz-selection { background: #38761D; color:#ffffff; }
This is useful in your website or blog too..to add highlight color as your theme. :)


Featured Offers: