Hi Guys,
There are times when you would like to override default browser text selection color. What I mean can only be shown with example.
Try selecting the paragraph above.
You will see something like this (chrome)
Now say you would like to change that selection color to grey or red or any other color of your choice then how to do it
Lets check it out
Global selection color change
You can add these styles to your page or to your Stylesheet file for page/site wide selection color change
|
1 2 3 4 5 6 7 8 9 10 |
<style type="text/css"> ::selection { background: red; color:white; } ::-moz-selection { background: red; color:white; } </style> |
This will have a page wide effect.
Demo
A demo can be reached from the link below
http://jaspreetchahal.org/examples/css-examples/css-selection.html
The result will be similar to the one shown below (chrome)
Now that was with changing text color globally lets do the same thing with individual paragraphs
say you have a markup as shown below
.
|
1 2 3 4 5 6 |
<div class='col1'> DIV 1 </div> <div id='col2'> DIV 2 </div> |
|
1 |
change selection color for individual elements on page
Now to change selection color of above two containers I’ll have these style in my spreadsheet or on my page
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 |
<style type="text/css"> .col1::selection { background: red; color:white; } .col1::-moz-selection { background: red; color:white; } #col2::selection { background: green; color:white; } #col2::-moz-selection { background: green; color:white; } </style> |
The result will be this (chrome)
Demo is provided below
http://jaspreetchahal.org/examples/css-examples/css-selection-individual.html
Browser support
All major browsers in the latest versions support this behavior
I hope that this help.
If you have any questions regarding this post or would like to mend anything please leave your comments
cheers,
Leave a Reply