Why Does the CSS3 Pseudo ::Selection Not Change the Color for All Parts

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

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

How can I use CSS3 ::selection without changing the default color and background color?

Since this selector is not officially supported for CSS, being removed from CSS3 and not currently in the draft for CSS4, there really isn't much documentation on how exactly the selector should be applied.

As defined by the selector, it is meant to override the system's default text selection colors. The browsers have apparently taken this literally. By specifying ::selection, those colors are immediately overwritten, even if you haven't specified them. The problem is the system's defaults are not part of CSS. The browser is seeing your declaration and thinking "ignore the system's default, use what's in this declaration instead." Since you don't have colors specified there, no colors are applied (background is none and color is inherit). Whoops, kind of hard to tell your text is selected, huh?

This is only a theory of what appears to be happening since, as I said, there really is no documentation on what actually happens, or what is supposed to happen.

Honestly, the only way you'd really know for sure is to look at the source code and see what it's doing when it sees that selector. Maybe asking someone on the development team for one of these browsers would be easier. Either way would still be difficult. Maybe you could submit a bug report and they can delve into the issue a little more...

CSS3 ::selection behaves differently in FF & Chrome

For some reason Chrome forces it to be semi-transparent. However, you can get around this by setting the background using rgba. I have set the alpha value to be just 0.01 less than 1. Live example: http://jsfiddle.net/tw16/m8End/

p::-moz-selection {
    background:rgba(255, 255, 125, 0.99);
    color:#032764;
}
p::-webkit-selection {
    background:rgba(255, 255, 125, 0.99);
    color:#032764;
}
p::selection {
    background:rgba(255, 255, 125, 0.99);
    color:#032764;
}

The remaining blue color in ::selection?

Frankly, it's very difficult to tell if this is buggy behavior, although I'd surmise that it looks very much like it. ::selection suffered from a lack of proper definition (and thus a lack of proper implementation and testing), so I bet even browser vendors have had trouble figuring out what's wrong.

Worth mentioning is that this rule, from the first site:

::selection, ::-moz-selection { background:#59574b;color:#fdfcf5; }

Seems very much benign, except it incorrectly combines ::selection and ::-moz-selection such that it will never work in Firefox, because it doesn't recognize ::selection and drops the whole rule. 24ways.org doesn't display the selection color properly in Firefox either, not because of combined selectors but because there is no ::-moz-selection selector in the first place.

As to why Chrome and Safari leave blue areas of highlight in certain areas in the first site, I really don't know. However, I think Jared Farrish makes a good point:

This replicates the problem in Chrome (at least): jsfiddle.net/RfPgt It seems to be when an element is nested within another element which itself has selectable elements.

CSS - SVG in a pseudo element with Color changing capabilities

This is easy if you flip the logic - instead of adding color on the hover - think of it as removing color when you are not hovering.

With CSS filters - you can convert your svg to greyscale - meaning that a color image / SVG is rendered as a black and white image. Then on hover - stop the filter / conversion and your svg will have its actual color.

Note that this only works with one color change - you cannot have different paths go different colors etc - but by reversing the color logic you get a black and white svg that turns colorful on hover.

The following div has a border - just to show the dimensions (and I would probably do the svg as the background image of the div rather than the ::before - but I left it as requested. The SVG is iniitally shown as black and on hover over the div - the svg turns red.... magic :)

div {
  height: 160px;
   width: 300px;
   border: solid 1px blue;
   position: relative
}

div::before {
  content: url('data:image/svg+xml;utf8,<svg version="1.1" id="" xmlns="http://www.w3.org/2000/svg" width="100%" height="100%" xmlns:xlink="http://www.w3.org/1999/xlink"  style="" xml:space="preserve"><path d="M150 0 L75 200 L225 200 Z" fill="red"></path></svg>');
  display: block;
    -webkit-filter: grayscale(100);
    filter: grayscale(100);
}

  
div:hover:before{
    -webkit-filter: grayscale(0);
    filter: grayscale(0);
}   

<div></div>

CSS3 ::selection selector not working properly on anchor tags

Note that per MDN

Only a small subset of CSS properties can be used in a rule using
::selection in its selector: color, background, background-color and
text-shadow. Note that, in particular, background-image is ignored,
like any other property.

The line on your link is part of text-decoration which is not taken into consideration by the pseudo selector. Your best bet would perhaps be to remove it using

a{
 text-decoration:none;
}

You may want to also note:

Though this pseudo-element was in drafts of CSS Selectors Level 3, it
was removed during the Candidate Recommendation phase (link)

The ::selection pseudo-element currently isn't in any CSS module on
the standard track. It should not be used in production environments.

Further information

problem with select and :after with CSS in WebKit

I haven't checked this extensively, but I'm under the impression that this isn't (yet?) possible, due to the way in which select elements are generated by the OS on which the browser runs, rather than the browser itself.

---

Related Topics