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
::selection
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. :)

Advertisement


Featured Offers:
Advertisement