::selection background-color and color rendering in browsers

Question

Issue

Using the following just simply doesn't work properly in -webkit- and -moz- browsers:

#exampleElement {
    background-color: red; /* For example */
}

#exampleElement ::selection {
    color: black;
    background-color: white;
}

Result: WebKit- and Blink-powered browsers

In Chrome, Opera, and Safari, ::selection's background-color renders as if it was 50% alpha but the font colour is correct.

Chrome 29.0.1547.62:

Opera 15.0.1147.130:

Safari 5.34.57.2:

Result: Gecko-powered browsers

In Firefox, the entire ::selection rule is ignored. ::selection's background-color just happens to be white due to #exampleElement's dark background-color (thanks to @BoltClock for noticing that)

Firefox 22.0:

Result: Trident-powered browsers

In Internet Explorer, (would you believe) everything is rendered perfectly.

Internet Explorer 10.0.9200.16660:

Is this just a flaw of these rendering engines / browsers or are there -webkit- and -moz- alternatives that I'm unaware of?

I've saved an example of this on jsFiddle, for people to see: http://jsfiddle.net/BWGJ2/

Firefox is actually ignoring the entire ::selection rule - its default highlight background just happens to be white if it determines that the parent background is dark enough not to use blue as a background. — BoltClock

soerface soerface · Accepted Answer · 2012-06-17T23:43:26

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.