::selection background-color and color rendering in browsers ::selection background-color and color rendering in browsers google-chrome google-chrome

::selection background-color and color rendering in browsers


According to quirksmode.org, -webkit-selection and -moz-selection are indeed available. I just tested it with Chrome (18) and Firefox (13) and can confirm that it works with Firefox, but I didn't have success with -webkit-selection on Chrome (it ignored it), and according to this SO question it doesn't exist (and the answer says that ::selection should also work on all browser, but doesn't for me, too).

As already metioned in this answer, Chrome forces the selection to be transparent, but you can work around this using

background:rgba(255, 255, 255, 0.99);

For more details, checkout the linked answer by tw16


Furthermore, this works for me on FF:

::selection { /* stuff */ }::-moz-selection { /* stuff */}

But this does not:

::selection, ::-moz-selection { /* stuff */ }

But maybe this is not related to ::selection but does apply on all pseudo elements, couldn't find an answer to that.


There are browser-dependent versions. The version you're using was the standard CSS3 way, but then it got dropped from the spec. I dunno about its browser support...

And something else to consider: An ID-based CSS selector might "outweigh" a pseudoclass-based selector, resulting in the ID-based CSS always taking precedence. So try adding !important to your ::selection style to make sure it's always used when applicable.

Hope that helps!