How can I use CSS3 ::selection without changing the default color and background color?

Question

The following lines are included in the HTML5 Boilerplate template by default:

::-moz-selection{background:#fe57a1;color:#fff;text-shadow:none;}
::selection{background:#fe57a1;color:#fff;text-shadow:none;}

However, I want to keep the selection color as the OS default (blue in Windows, I think it's brownish orange in Ubuntu). If I leave out the background property, there will be no background.

Interlay

Wasn't this removed from CSS3 specifications? – Neoteny

So you want to change the text color but not the background color? – Hydrozoan

I hope not, it gave you more control over your color scheme and is perfectly harmless. – Managerial

If you do not want to change the background-color and text color, then what do you want to do with ::selection!! Am i missing something here! – Carse

I only want to remove the text-shadow, since there will be an inversely colored text shadow if I select text with a text shadow. – Interlay

@Linksku: I think the original selector only even allowed background-color and color to be set. Other properties were supposed to be ignored. Might be why he's confused. – Neoteny

@animuson: Yep. It allows only color, cursor, background and outline. – Confide

Answer 1

Since this selector is not officially supported for CSS, being removed from CSS3 and not currently in the draft for CSS4, there really isn't much documentation on how exactly the selector should be applied.

As defined by the selector, it is meant to override the system's default text selection colors. The browsers have apparently taken this literally. By specifying ::selection, those colors are immediately overwritten, even if you haven't specified them. The problem is the system's defaults are not part of CSS. The browser is seeing your declaration and thinking "ignore the system's default, use what's in this declaration instead." Since you don't have colors specified there, no colors are applied (background is none and color is inherit). Whoops, kind of hard to tell your text is selected, huh?

This is only a theory of what appears to be happening since, as I said, there really is no documentation on what actually happens, or what is supposed to happen.

Honestly, the only way you'd really know for sure is to look at the source code and see what it's doing when it sees that selector. Maybe asking someone on the development team for one of these browsers would be easier. Either way would still be difficult. Maybe you could submit a bug report and they can delve into the issue a little more...

Neoteny

From what I can tell, the CSS WG is considering putting ::selection back in UI level 4 if it doesn't make it to UI level 3. Not holding my breath on that one... – Confide

@BoltClock: Yeah, I don't know why they wouldn't, but it's still not in the draft for CSS4 at the moment. :( – Neoteny

It's not in Selectors 3 or in the draft for Selectors 4 because they're moving all pseudo-elements out of that spec. Pseudo-elements are a rather different beast which I imagine can't be fully defined by their selectors alone. They'll be scattered around UI and other modules, though. – Confide

By the way, you can find a reference to how it works here: w3.org/TR/2001/CR-css3-selectors-20011113/#UIfragments It was taken out during the CR or PR phase, but very well-implemented across browsers (even Firefox) based on that revision of Selectors 3 anyway. They may return it. – Confide

Or, you know what, I'm gonna go and bother some people in the mailing list. And while I'm at it, I should also edit all my answers that mention ::selection here... I only just found out after your answer prompted it that it wasn't entirely dropped :) – Confide

Way to go; that's @Confide distracted for a little while. Quickly, while he's busy, let's answer all the CSS questions..! =D – Baumgardner

Looks like it's gone as of the latest LC draft. Some of the main problems are covered in this mailing list thread. We have some basic implementation, at least, so it may return in UI level 4 if they can figure out the rest of the issues, assuming level 3 manages to stabilize soon. – Confide