Webkit : Css text selection styling can not make background white?

Question

So text selection was made stylable trough the ::selection pseudo element in order to override the browser's default selection color. But to me, it seems that white as a selection background color is forbidden in favor of a greyish, opaque color.

::selection      { color: black;  background: white; }
::-moz-selection { color: black;  background: white; }

body {
    background: black;
    color: white;
}

So selecting me is supposed to invert the text and background colors. But the selected text background color is not white, but grey.

Why does this not create a perfectly white background ? Instead, it shows a grey background (#989898)

Also see this snippet on https://jsfiddle.net/duk3/hzodm1sh/

This happens in Chrome and Safari - still happening with the current versions — Romainpetit, Mar 31 '17 at 10:55

score 12 · Accepted Answer · edited May 23 '17 at 11:54

Ok so following this question I found the answer :

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.

::selection { color: black;  background: rgba(255, 255, 255, 0.996);
; }

body {
    background: black;
    color: white;
}

Selecting me DOES invert the text and background colors. Well, almost, but it looks like perfect white.

chiapa · Answer 2 · 2015-09-28T10:48:21.087

0

Maybe it's a browser specific problem.

Try this:

Fiddle

::selection {
    color: black;
    background: white;
}
body {
    background: black;
    color: white;
}
::-moz-selection {
    color: black;
    background: white;
}

So selecting me is supposed to invert the text and background colors.

Here is the result in a print:

edited Sep 28 '15 at 10:48

answered Sep 28 '15 at 10:29

chiapa

4,362
11
66
106

1

You're linking to a red background color selection example. I see it red also, my question concerns the white color specifically – Romainpetit Sep 28 '15 at 10:33
Corrected @Romainpetit – chiapa Sep 28 '15 at 10:38
Ok I edited the moz prefixed property, so we are using the same code now. Do you see real white or grey as selection background ? – Romainpetit Sep 28 '15 at 10:42
When selected, I see black letters over a white background. I'll add a print to the answer – chiapa Sep 28 '15 at 10:47
Thanks chaipa, so this must indeed be browser of environnement specific. I'm going to dig into this – Romainpetit Sep 28 '15 at 11:09
@Romainpetit, sometimes we forget this: have you refreshed the page so it loads the new styles? Maybe it's reading the cached ones, without the moz prefixed property – chiapa Sep 28 '15 at 11:19
No, thanks for caring. I've been testing in latest chrome and safari with cache cleared – Romainpetit Sep 28 '15 at 11:24
This doesn't work on Webkit, which was specified in the question. Please don't post answers that don't work. – nightpool Sep 17 '19 at 18:07

Webkit : Css text selection styling can not make background white?

2 Answers2