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 hav

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); }