Home/ Questions/Q 7054665
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-28T03:39:16+00:00

Why does the CSS3 pseudo-element selection not change all parts of the highlight? As

  • 0

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.

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    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

    • 0