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/
::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