What Is The Browser-Default Background Color When Selecting Text

What is the browser-default background color when selecting text?

1. Safari 6.0.3 Mac^*: #B4D5FE
2. Chrome 26.0.1410.65 Mac^*: #ACCEF7
3. Firefox 19.0 Mac^*: #B4D5FF
4. Chrome 26.0.1410.64 m Windows 8⁺: #3297FD
5. Firefox 20.0.1 Windows 8⁺: #3399FF
6. Safari 5.1.7 Windows 8⁺: #3298FD
7. Internet Explorer 10.0.4 Windows 8⁺: #3399FF
8. Chrome 107.0.5304.88 Windows 11: rgba(0, 116, 255, 0.8) or #0074ffcc

^*_{Found using ColorSnapper for Mac}

⁺_{Found using ColorSchemer for Windows}

And here's a screenshot of that information with the hex color codes highlighted in the same color:

---

This will be a never-ending list, however, since each...

1. Browser
2. Operating System
3. Browser Version (maybe)

...will probably have a different color. Also, as of CSS3, you can change the color using:

::selection{
    background-color:#000;
}

How to set custom ::selection style but keep the browser-default text selection color?

This behavior has been codified in the spec, as follows:

The UA must use its own highlight colors for ::selection only when neither color nor background-color has been specified by the author.

(This used to say "should" until last year, when it was changed to "must". There aren't any browsers implementing some version of ::selection that don't already follow this rule anyway.)

System colors are only exposed to CSS as user-defined values (which may or may not be just the system default), and not the system-defined defaults, so can't be known in advance. Therefore, as CBroe implies, this rule is in place to ensure that changing just one doesn't cause it to clash with the user-defined value for the other, causing contrast issues. The actual codification of this rule in the spec is for legacy reasons, but this rationale for browsers behaving like this in the first place is cited in discussions such as this one.

There are a number of standardized as well as non-standard system colors that exist, but the behavior of these varies wildly from browser to browser, and from platform to platform. Attempting to use any of these may have unexpected results, ranging from unexpected colors used, to being ignored by the browser altogether. Plus, as I mentioned, system colors are only exposed as user-defined values anyway. The CSSWG has discussed potential ways to improve this before; here's a recent conversation.

You are encouraged to apply a custom selection background color that complements your custom selection foreground color.

In-browser default selected text color - What is it?

I'd agree with Joshua that the colors come from the system, but I'd disagree about CSS, for example, CSS-Tricks:

::selection { background: #ffcc89; color: #222; }
::-moz-selection { background: #ffcc89; color: #222; }

For more info, see Quirksmode on selection styles.

Determine browser's default text highlight color using JavaScript or Dart

I would say that you can't.

Both getComputedStyle(yourElement, '::selection').backgroundColor and getComputedStyle(yourElement, '::-moz-selection').backgroundColor will return transparent as default value and browser won't override os's default.

(Worth to be mentioned that if you set it to transparent, default os' value will be overriden).

I don't think browsers have access to os default preferences, and if they do, they probably won't let any website access it it so easily.

How to reset background color of ::selection

The solution is to use the system color highlight for the background and highlighttext for the foreground.

Colors like inherit won't work, because inherit means "use the same color as the parent element". That's not what we want!

The first example sets the selection colors to yellow on brown, to emulate the framework theme. Just to make sure changing those colors works at all.

/* colours from theme */::-webkit-selection {  background-color: brown; color: yellow;}::-moz-selection {  background-color: brown; color: yellow;}::selection {  background-color: brown; color: yellow;}

<div>This is a div in which you can make a selection</div>

Get the document's background color

You could use CSS2 system colors - note that these are deprecated in CSS3 and appearance property is advised to use instead.

ul { background-color: Background; } /* this should be desktop background */

ul { background-color: Window; } /* this is browser background */

However, after 5+ years, the standards turned 180 degrees: the appearance was abandoned (except for none value) and system colors are back with different names, see Michael Alan's answer here.

How to change the selected text color In Internet explorer?

It can't be done in IE with pure CSS and I don't know of any pre-packaged JS that will get the job done, either.

---

Related Topics