Changing the text selection color is always a nice touch, it shows that you’re paying attention to the finer details of the site.
Today in this snippet we share a quick tip that will allow you to achieve some different looks for your selected text.
[css]
/* Mozilla based browsers */
::-moz-selection {
background-color: #FF68B0;
color: #FFF;
}
/* Works in Safari */
::selection {
background-color: #FF68B0;
color: #FFF;
}
/* Works in Opera */
::-o-selection {
background-color: #FF68B0;
color: #FFF;
}
::-ms-selection {
background-color: #FF68B0;
color: #FFF;
}
/* Works in Internet Explorer */
::-webkit-selection {
background-color: #FF68B0;
color: #FFF;
}
[/css]
There is 1 comment
Hi!
Thanks for sharing your discoveries.
I can complete it a bit.
There is only the “-moz-” vendor, others do not exist: http://caniuse.com/#feat=css-selection
The folowing lines are good enough:
/* Mozilla based browsers */
::-moz-selection {
background-color: #FF68B0;
color: #FFF;
}
/* Works in IE, chrome, safari & opera */
::selection {
background-color: #FF68B0;
color: #FFF;
}
Cheers,
Thomas.