5

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:
Chrome 29.0.1547.62

Opera 15.0.1147.130:
Opera 15.0.1147.130

Safari 5.34.57.2:
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:
Firefox 22.0

 

Result: Trident-powered browsers

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

Internet Explorer 10.0.9200.16660:
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/

mythofechelon
  • 3,692
  • 11
  • 37
  • 48

2 Answers2

4

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.

Community
  • 1
  • 1
soerface
  • 6,417
  • 6
  • 29
  • 50
  • I see. So, ignore `-webkit-selection` then. Hmm. The RGBA method didn't work for me in Chrome 19? :/ http://jsfiddle.net/MythOfEchelon/a9ZZ5/6/ – mythofechelon Jun 17 '12 at 23:53
  • 1
    Aw, sorry, made a mistake in my answer. You need to use `0.99` instead of `1`, for some reasone, Chrome makes it transparent if you use 1. Going to edit the answer. – soerface Jun 17 '12 at 23:56
  • 1
    The reason why you need to split up the rules is detailed here: http://stackoverflow.com/questions/5302172/firefox-moz-selection-selector-bug-is-there-a-workaround This applies to all selectors, not just pseudo-elements. Note also that [WebKit deliberately ignores this rule for pseudo-elements](http://stackoverflow.com/questions/8317954/ignoring-webkit-specific-css-selector-in-firefox), but that isn't relevant here since it already uses the unprefixed `::selection`. – BoltClock Jul 01 '12 at 14:05
0

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!

Xavier Holt
  • 14,471
  • 4
  • 43
  • 56
  • Odd that using the appropriate browser-dependent versions is just as ineffective and sometimes even less effective.. http://jsfiddle.net/MythOfEchelon/a9ZZ5/3/ – mythofechelon Jun 17 '12 at 23:35
  • @BenHooper - The Mozilla-specific version (mistakenly applied to the "Webkit" div) was the only one that worked for me (Firefox 12.0 on Fedora). It did correctly override the ID-based selector, at least. I sure do hate browsers sometimes... – Xavier Holt Jun 17 '12 at 23:48
  • It was dropped because its definition in CSS3 was incomplete at best, so there never really was a "standard" to adhere to. Also, `::selection` is a pseudo-element, which has even less weight than a pseudo-class. – BoltClock Jul 01 '12 at 14:08