8

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:

enter image description here

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.

BoltClock
  • 700,868
  • 160
  • 1,392
  • 1,356
Nathan
  • 11,814
  • 11
  • 50
  • 93

1 Answers1

11

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://stackoverflow.com/a/8529323/918414

Community
  • 1
  • 1
ThinkingStiff
  • 64,767
  • 30
  • 146
  • 239
  • 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... – Nathan Jan 15 '12 at 02:01
  • @Nathan Scroll way down in the HTML box. – ThinkingStiff Jan 15 '12 at 02:08
  • 3
    I am tempted to file a new bug just so the right terminology is used (pseudo-element, not pseudo-class). – BoltClock Jan 15 '12 at 06:05
  • @BoltClock And maybe get someone's attention that it's still an issue. – ThinkingStiff Jan 15 '12 at 06:08
  • @ThinkingStiff 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. – Camilo Martin Jun 06 '12 at 12:47
  • @CamiloMartin Scroll to the bottom of the HTML pane. – ThinkingStiff Jun 06 '12 at 19:32
  • @ThinkingStiff Wow, I didn't even realize it at first... You're truly a geeky person, kudos. Even GA! – Camilo Martin Jun 07 '12 at 09:40
  • 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 (http://src.chromium.org/viewvc/chrome/branches/2125/src/webkit/?view=log). – Jon Oct 31 '14 at 16:08
  • 1
    Checking around on Chromium, I see someone opened an analogue bug for blink (https://code.google.com/p/chromium/issues/detail?id=305920), however that was duped out to this issue: https://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. – Jon Oct 31 '14 at 16:10
  • As of Chrome 39.0.2171.71, I’m seeing it fixed. – Adam Dec 01 '14 at 22:14
  • @Adam testing on 39.0.2171.71, this issue is definitely not fixed. The issue is easiest to see with this fiddle: http://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. – Jon Dec 02 '14 at 17:41
  • @Jon 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. – Adam Dec 05 '14 at 00:13