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

Question

When you select text in a webpage, the background gets a default blue color. What exact color code does this blue color have?

Answer 1

The ::selection CSS pseudo-element applies rules to the portion of a document that has been highlighted (e.g., selected with the mouse or another pointing device) by the user.

The default depends on the browser you are using. It's usually somewhere around #3297fd.

You can change it like so:

/* draw any selected text yellow on red background */
::-moz-selection { color: gold;  background: red; }
::selection      { color: gold;  background: red; } 

/* draw selected text in a paragraph white on black */
p::-moz-selection { color: white;  background: black; }
p::selection      { color: white;  background: black; }

Answer 2

The selection background colour? That doesn't really have anything to do with the browser, it's an OS setting (and is generally customizable). If you really want to know the specific blue on your machine, screen cap it and open it in any graphics program that lets you inspect colour.

Answer 3

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

^*_{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 have a different color. Also, as of CSS3, you can change the color using:

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