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; /* WebKit/Blink Browsers */
}
::-moz-selection {
background: #ffb7b7; /* Gecko Browsers */
}
Within the selection selector, color
and background
are the only properties that work. 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;
}
Note how the selectors are not combined, even though the style block is doing the same thing. It doesn’t work if you combine them:
/* Combining like this WILL NOT WORK */
p.yellow::selection,
p.yellow::-moz-selection {
background: #fff2a8;
}
That’s because browsers ignore the entire selector if there is a part of it they don’t understand or is invalid. There is some exceptions to this (IE 7?) but not in relation to these selectors.
For even more crazy flair, you could reveal an image with text selection.
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;
}
Use this but they don’t seem to work on editable text like in an input field:
::selection {background-color: #ffb7b7;}
::-moz-selection {background-color: #ffb7b7;}
::-webkit-selection {background-color: #ffb7b7;}
From the article:
“At the time of this writing, only Safari and Firefox are supporting this…”
That said, the prefix for Opera is -o-, so if Opera’s support for this has changed since then, try ::-o-selection {background:#C32A22;}. As said in the article above, “background is the only property that works”, so declaring a color is just added typing. Using color:#DFDCDC; for this will not change the color of the highlighted text.
Webkit is a Safari thing. Opera may choose to support it, I suppose, but they are not obligated to do so.
TBH, I’m not much for using all the prefixes. They add a lot of weight to the CSS and are not always well-supported. I generally wait until all the browsers (or at least all but IE) have added support for the property sans prefix or I use Lea Verou’s prefix-free script. (http://lea.verou.me/prefixfree/) Sure, any script adds weight, but at least it’s less work on my end, since I can just delete the script again once it’s no longer needed, without having to go through every line of CSS deleting redundant code.
works great in chrome too
pity it doesn’t work for inputs (works probably only in Firefox)
Hi, this didn’t work for me at first until I changed ‘background’ to ‘background-color’. Now it works great. Thanks! Very cool.
Apparently
::selection
and::-moz-selection
don’t validate.Defining sections
p.red::selection
only seems to work with paragraphs, at least when I tried withdiv.red::selection
it had no effect, which is a shame.I want to change the selected text font color. Any addition or modification in code please.
Really nice thanks! I was just wondering if there’s a way to also change the grey color selection on blur (like when you click on the browser’s address bar)
Nice little effect…just implemented this on a site and it works like a charm (and in Chrome). Quick and easy style edits. Some clients love this kind of attention to detail too. Thanks!
Hi,
I have a question: Why can“t you put ::selection and ::-moz-selection together and define a value for both of that? If you do that FF will ignore the values.
Greetings
That’s a good CSS lesson! When a browser doesn’t understand any part of a selector, it ignores the whole selector (even if they are comma separated). There are some exceptions but mostly in old browsers (IE 7?).
@Chris, but this does work:
Why is that? What’s the difference?
Dave – Browsers need only ignore property declarations with invalid/unrecognized names or values, not the entire rule nor the line they are on. Whether you list property declarations on separate lines, or put them all on one line, doesn’t really matter.
Want to get slightly more technical?
Thanks @Meta_Ing, that makes perfect sense now :)
Its not working in IE 8
Works well in webkit for static text but has no effect on textarea or input!
Great write up thanks.