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;
}
Loading ...
1
I especially like the cute colours you chose
Comment by Yaili — February 1, 2008 @ 9:40 am
2
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!
Comment by CSSnewbie — February 1, 2008 @ 10:44 am
3
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.
Comment by Dan Cole — February 1, 2008 @ 10:33 pm
4
I really liked this idea so I took it to the next level:
http://metaatem.net/selcolor.php
Comment by Erik Kastner — February 1, 2008 @ 11:00 pm
5
Ok, I couldn’t leave well-enough alone. Here’s the next step:
Web Standards FTW!
Comment by Erik Kastner — February 2, 2008 @ 2:33 pm
6
thats was cool Erik
Comment by glandebarroco — February 2, 2008 @ 3:13 pm
7
Yay ! I implemented it here: http://www.barefootstudios.ca/
Comment by Umer Tahir — February 2, 2008 @ 4:02 pm
8
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/
Comment by Erik Kastner — February 3, 2008 @ 5:59 am
9
doesn’t work in opera
Comment by sinsim — February 3, 2008 @ 8:59 am
10
This does not work for me either!! FF2
Comment by Jermayn Parker — February 4, 2008 @ 9:26 pm
11
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’
Comment by bart — February 5, 2008 @ 4:33 pm
12
@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).
Comment by Chris Coyier — February 6, 2008 @ 7:49 am
13
Nice effect! Is there any way to define the color of the text when it’s highlighted?
Comment by Martha Retallick — March 24, 2008 @ 3:21 pm
14
@Martha Retallick:
Offcourse you can! Just use color:
Comment by MeMe — May 13, 2008 @ 7:56 am