Overriding The Default Text Selection Color With CSS
One of those cool CSS3 declarations that you can use today is ::selection, which overrides your browser-level or system-level text highlight color with a color of your choosing. At the time of this writing, only Safari and Firefox are supporting this, and both in slightly different ways. Fortunately, this can be thought of as one of those “forward-enhancement” techniques. It’s a nice touch for those using modern browsers, but it just gets ignored in other browsers and it’s not a big deal.
Here is the rub:
::selection {
background: #ffb7b7; /* Safari */
}
::-moz-selection {
background: #ffb7b7; /* Firefox */
}Within the selection selector, background is the only property that works. What you CAN do for some extra flair, is change the selection color for different paragraphs or different sections of the page.
All I did was use different selection color for paragraphs with different classes:
p.red::selection {
background: #ffb7b7;
}
p.red::-moz-selection {
background: #ffb7b7;
}
p.blue::selection {
background: #a8d1ff;
}
p.blue::-moz-selection {
background: #a8d1ff;
}
p.yellow::selection {
background: #fff2a8;
}
p.yellow::-moz-selection {
background: #fff2a8;
}
I especially like the cute colours you chose :)
As far as forward-enhancement techniques go, this one is pretty kick-butt. Admittedly, only about 20% of the average current viewer base will ever see it, but it’s a fantastic visual touch for those who do, and it does no harm whatsoever to those who don’t. Great tip!
That’s really cool. It’s something that most visitor would never see, but the ones that do would be surprised. Although I don’t see why Firefox had to add -moz- to for their browser… should probably go recommend them to change it.
I really liked this idea so I took it to the next level:
http://metaatem.net/selcolor.php
Ok, I couldn’t leave well-enough alone. Here’s the next step:
Web Standards FTW!
thats was cool Erik
Yay ! I implemented it here: http://www.barefootstudios.ca/
Thanks everyone. I’ve cleaned it up and put it on EC2. Here’s the new url, please let me know if it doesn’t work for you!
http://metaatem.net/highlite/
doesn’t work in opera
This does not work for me either!! FF2
oh, it’s really nice thing for modern browsers users. It works great in Opera 9.5, same with Yours ‘Hide an image in html’
@Jermayn: It absolutely works in Firefox 2. Does the example page not work for you?
@bart: That’s cool it works in Opera 9.5. So now it’s just IE left behind (as far as major browsers go).
Nice effect! Is there any way to define the color of the text when it’s highlighted?
@Martha Retallick:
Offcourse you can! Just use color:
I can’t seem to get this working in Opera, does anybody know why?
Here is the code:
*::selection {
background: #C32A22;
color: #DFDCDC;
}
*::-moz-selection {
background: #C32A22 none repeat scroll 0 0;
color: #DFDCDC;
}