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?

possible duplicate of [CSS3 ::selection behaves differently in FF & Chrome](http://stackoverflow.com/questions/7224445/css3-selection-behaves-differently-in-ff-chrome) — Cody Gray - on strike, Jun 29 '14 at 14:39

score 13 · Accepted Answer · answered Feb 20 '13 at 01:49

13

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/

answered Feb 20 '13 at 01:49

Explosion Pills

188,624
52
326
405

This will disrupt selecting images. The image will be covered, but it should be slightly visible. – rvighne Jan 04 '14 at 02:59
@rvighne Come to think of it, "selecting images" is a bit of an edge case. – Camilo Martin Apr 02 '15 at 12:37

Raphael · Answer 2 · 2016-03-09T10:41:16.437

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

score 1 · Answer 3 · edited May 23 '17 at 12:32

1

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

edited May 23 '17 at 12:32

Community

1
1

answered Apr 02 '15 at 15:29

Camilo Martin

37,236
20
111
154

CSS selection color behaving strangely on Chrome

3 Answers3

Linked