CSS selection color behaving strangely on Chrome

Question

I'm trying to change the selection color of my website using the CSS ::selection pseudoelement.

As seen in this jsFiddle, the text is supposed to have a totally black background color when being selected. On Firefox, this is the case.

However, on Chrome, the color is not absolutely black. Chrome seems to be fiddling with my colors.

You can see this if you leave the text black while selecting: on Firefox, it becomes invisible, while on Chrome you can still see it.

I've noticed this effect on other background colors that I was using: They were always a bit off on Chrome. It seems to me like a bit of red was added.

How can I get the true colors that I want on Chrome?

Answer 1

Possibly to prevent exactly what you are trying to do, it seems like Chrome will change the opacity of the background color of the selection if it's 1. You can cheat this by setting the opacity very close to 1 like (background-color: rgba(0,0,0,.99).

http://jsfiddle.net/ExplosionPIlls/a3gfR/5/

Answer 2

When you are using the suggestion above Firefox still shows a light blue color on images when you select it.

I could get rid of it by the following code:

img {
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

The images are now ignored by selection.

So by applying this code I could get a more uniform look on all browsers.

*::selection {
    /* WebKit/Blink Browsers */
    background-color: rgba(0,0,0,.99); /* black */
    color: #ffffff; /* white */
}

*::-moz-selection {
    /* Gecko Browsers */
    background: #000000; /* black */
    color: #ffffff; /* white */
}

img {
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

Answer 3

As I've mentioned in a separate answer, the closest value you could use is about 0.996.

Also, give it a lower opacity for img::selection so images aren't completely obscured in Chrome.

Like so:

::-moz-selection { background: rgba(255, 127, 127, 1); }
::selection { background: rgba(255, 127, 127, 0.996); }
img::selection { background: rgba(255, 127, 127, 0.8); }