The browser's default text highlight (selection) background color can be overridden, e.g.:

::selection {
  background: #ffb7b7;
}

And the color is browser/OS specific. Is there a way to read the browser's default value using JavaScript or Dart?

The browser's default text highlight (selection) background color can be overridden, e.g.:

::selection {
  background: #ffb7b7;
}

And the color is browser/OS specific. Is there a way to read the browser's default value using JavaScript or Dart?

• javascript
• html
• css
• browser
• dart

Share Improve this question Follow edited May 23, 2017 at 10:27 CommunityBot 111 silver badge asked May 15, 2015 at 1:43 Cristian AlmstrandCristian Almstrand 71355 silver badges1818 bronze badges

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 5

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.

As described at https://stackoverflow./a/39543711/3273929, you can use CSS system colors: https://www.w3/TR/2010/PR-css3-color-20101028/#css2-system, although they are deprecated, they do work.