Get default selection color?

Question

I can change the CSS selection color, but how can I get the browser/OS default selection so that I can use it elsewhere?

e.g. on Ubuntu+Chrome text is highlighted in orange.

I want to apply this same style to an <li> when I hover over it with my mouse.

Can you describe the problem further - so do you mean that someone on Ubuntu would then have their hover style be orange background + white text and someone on mac might be blue bg + white text? — Nathaniel Flick, Aug 23 '17 at 19:46
This might be what you're looking for: https://stackoverflow.com/questions/30250207/determine-browsers-default-text-highlight-color-using-javascript-or-dart, see the second answer - systems are deprecated, but supposedly still work so you could potentially detect the browser than use them for your styles on the page. — Nathaniel Flick, Aug 23 '17 at 19:47
Also some stock browser default colours listed here if you want to go that route: https://stackoverflow.com/questions/16094837/what-is-the-browser-default-background-color-when-selecting-text — Nathaniel Flick, Aug 23 '17 at 20:00

score 5 · Answer 1 · answered Aug 23 '17 at 19:54

5

In the CSS2 specs some color keywords are defined but are now deprecated. Yet they should still work just fine:

.selected {
  background: Highlight;
  color: HighlightText;
}

<p>Lorem ipsum with some <span class="selected">selected text</span></p>

answered Aug 23 '17 at 19:54

lumio

2

That's pretty cool, but it doesn't actually come out the [right color](https://i.stack.imgur.com/4yqiK.png). – mpen Aug 23 '17 at 19:55
Interesting. Windows 10 and macOS work just fine. What browser are you using? Did you try others as well? ... **edit:** okay, I just tested it in Firefox and it is rendered wrong as well. – lumio Aug 23 '17 at 20:05
That's Chrome 60 on Ubuntu 16.04. [Here's Firefox](https://i.stack.imgur.com/rgDlr.png) -- that one comes out right. – mpen Aug 23 '17 at 20:09
The color is off on Win10/Chrome FYI https://mpen.xyz/share/2023/01/2023-01-23_21-39-53.png – mpen Jan 24 '23 at 05:40

score 0 · Answer 2 · answered Aug 23 '17 at 20:12

0

I think that for what you want is better if you use Javacript combined with CSS.

You could check this post https://stackoverflow.com/a/11752084/8379001 that shows how to find out the os and applies it to CSS.

answered Aug 23 '17 at 20:12

Dan

The OS isn't enough information. Plus, `navigator.platform` comes out as `"Linux x86_64"` on Ubuntu 16.04. Doesn't even tell me the distro. – mpen Aug 23 '17 at 20:22
You have to keep in mind that in web pages your platform is a Web Browser, so your direct interaccion is the Web Browser not the OS, all the info you can get from the OS comes from the Browser. Therefore, your best chance is to use JavaScript that runs on the client side. CSS is better just for styling. Also, not all the web browsers have the same interaction with the OS; so, with some you could get more info than others. Anyway, your best approach is through Javascript. – Dan Aug 23 '17 at 21:29
I realize the information is limited, but I think it's a pointless endeavour. Chrome-Ubuntu uses orange highlight text, Chrome-Fedora uses blue. I won't get anywhere with that approach. Also, I *am* only using this for styling, so CSS would be optimal if it worked reliably. – mpen Aug 23 '17 at 22:03

2 Answers2