Keep default background-color for ::selection

[bigbossSNK]

::selection { text-shadow: none; } forces background-color: transparent; on selection in WebKit.

With color: auto; Webkit: background-color: transparent; IE9: default selection.

With color: initial; WebKit: background-color: transparent; color: black; IE9: default selection

With background-color: auto; WebKit: background-color: transparent; IE9: default selection

With background-color: initial; WebKit: color: black;, default background-color IE9: background-color: transparent;

With background-color: initial; color: white; WebKit: default selection IE9: background-color: transparent;

I chose the last case as the lesser evil, as IE9 isn't supported by dabblet yet.

[LeaVerou]

Thanks!

How is * ::selection different than ::selection?

[bigbossSNK]

In Win 7 all major browsers consider ::selection, *::selection, * ::selection and html ::selection equivalent. html::selection, however, is invalid in all of them except Opera. The spaced * is present only to prevent people experimenting with the code to reach that unwanted use case :)

The main addition, though, is background-color: initial; Without it, the background is transparent.

[LeaVerou]

Why not body::selection?

Also, Is color: white needed?

[bigbossSNK]

body::selection In WebKit: alters only the selection characteristics of text nodes belonging to body, doesn't change anything for child element nodes or their descendants. In FF, IE9: invalid selector In Opera: works as expected

body ::selection, body *::selection In FF, Opera, IE9: works as expected In WebKit: Alters any selection within body and its descendants. BUT, any region the rendering engine doesn't consider part of body, like some margins, will not have the background-color you set (try Select All).

color: white Without it, only Opera changes the selection's text color to white.

[LeaVerou]

Ok about color. About selection, I'm still not sure I get what issues a plain ::selection has.

[bigbossSNK]

No issues at all, ::selection and * ::selection are equivalent. The * just guides me, upon refactoring, to avoid writing body::selection, an invalid selector in FF and IE9.

[LeaVerou]

Can you please make it ::selection then, to avoid the overhead?

[bigbossSNK]

Done.

[LeaVerou]

Merged, thanks!