HTML/CSS-Traps for Selection Color

2014-07-11 | #css, #solution

Changing the selection color in current browsers should be the simplest thing ever. Well, it isn't. Let these tips lower your upcoming frustrations a little:

1. Selection selectors are not cross browser yet. You need to implement two CSS-rules, one for Firefox and one for all the rest. Do not mix these into one rule, the resulting rule won't work anywhere.

::selection {

color: #000;

background-color: rgba(255, 255, 255, 0.99);

}

::-moz-selection {

color: #000;

background-color: rgba(255, 255, 255, 0.99);

}

2. Ah, so you asked yourself why I used that strange RGBA-notation for the background color. Well, selections are transparent by default in some browsers and no, you can't change that with opacity. The only way is to select an opacity as close to 1 as possible without it being 1, because in that case the browser would simply reset it to its default selection opacity. Great, huh?

3. So you're still formatting text with BRs sometimes? Well, tough luck. Chrome will color any text node whitespace between lines in it's default selection styling. You absolutely have to enclose all text fragments in Ps. No excuses.