Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

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

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)

Css selection does not accept white background

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

like image 225
Romainpetit Avatar asked Sep 28 '15 10:09

Romainpetit


People also ask

How do you change the background color of selected text?

You can change the background color and color of selected text by styling ::selection . Styling this pseudo element is great for matching user-selected text to your sites color scheme.

How do I change the background color of text in CSS?

Simply add the appropriate CSS selector and define the color property with the value you want. For example, say you want to change the color of all paragraphs on your site to navy. Then you'd add p {color: #000080; } to the head section of your HTML file.

How do I change the background color of a selection?

To change the selected option background-color CSS style, we can set the style attribute of the select and option elements. to set the whole select element to background color 009966 and color FFF . Then we override the the styles in the option elements with style="background: white; color: black;" .

Which pseudo element selector changes the background color of text highlighted by the user?

The ::selection pseudo-element allows us to change the color, background color, and text shadow by selecting the text with the cursor.


1 Answers

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.
like image 154
Romainpetit Avatar answered Sep 20 '22 00:09

Romainpetit