Why does the CSS3 pseudo ::selection not change the color for all parts?

Question

Why does the CSS3 pseudo-element selection not change all parts of the highlight? As you can see in this screenshot I have selected part of the page, and parts of the selection are the default bright blue color:

This is the CSS that I'm using, it is at the top of my CSS file:

::selection { background: #3B3B3B; color: #fff; }
::-moz-selection { background: #3B3B3B; color: #fff; }

It seems like the highlight for inputs (text, checkboxes, etc.) and white space does not change. Does anyone know why this is, and is there a way to change it for every part of the page so the highlight color is consistent? I'm using Chrome.

Garrott

Answer 1

The ::selection pseudo-element doesn't work properly in Chrome/Safari. <input> elements will be the standard highlight color. It's a very old and still outstanding bug:

https://bugs.webkit.org/show_bug.cgi?id=38943

The only workaround I've been able to come up with is using contenteditable elements instead of <input> elements.

Here's a demo I created: http://jsfiddle.net/ThinkingStiff/FcCgA/
And a post I wrote about it: https://mcmap.net/q/453668/-css3-how-to-style-the-selected-text-in-textareas-and-inputs-in-chrome

Inedited

Ah, I see. Thanks for this. Hopefully that the webkit team will fix it soon, as it is a very annoying bug. By the way, how did you get that little Stack Overflow banner on your jsFiddle Demo that you linked to above? I don't see the markup for it anywhere in your jsFiddle's HTML box... – Garrott

@Garrott Scroll way down in the HTML box. – Inedited

I am tempted to file a new bug just so the right terminology is used (pseudo-element, not pseudo-class). – Soraya

@Soraya And maybe get someone's attention that it's still an issue. – Inedited

@Inedited How did you get JsFiddle to have a SO link so nicely put and your custom URL like that? It's so classy! Please tell. – Damper

@CamiloMartin Scroll to the bottom of the HTML pane. – Inedited

@Inedited Wow, I didn't even realize it at first... You're truly a geeky person, kudos. Even GA! – Damper

It looks like webkit just recently fixed this bug with rev 169024, however since Chrome forked to blink, it hasn't integrated that fix and may never do so? You can see that in the latest officially released branch of Chrome (2125), the last webkit rev integrated in appears to be 146743 (src.chromium.org/viewvc/chrome/branches/2125/src/webkit/…). – Dasie

Checking around on Chromium, I see someone opened an analogue bug for blink (code.google.com/p/chromium/issues/detail?id=305920), however that was duped out to this issue: code.google.com/p/chromium/issues/detail?id=167676. I just added a comment to that bug (for example, the webkit fix did not appear to be discussed there yet), so hopefully this issue will get some traction and ultimately resolved in Chrome. Please share your thoughts there if you want to get this fixed. – Dasie

As of Chrome 39.0.2171.71, I’m seeing it fixed. – Twandatwang

@Twandatwang testing on 39.0.2171.71, this issue is definitely not fixed. The issue is easiest to see with this fiddle: jsfiddle.net/RfPgt Just highlight the first two paragraphs on any version of Chrome and you will see a blue highlight added betwixt the green highlight. You will not see this on the other non-webkit browsers. – Dasie

@Dasie you’re absolutely right. I didn’t notice this post relates to more than just input selection. General region selection is still an issue. Thanks. – Twandatwang