Determine browser's default text highlight col

2019-02-22 02:08发布

问题:

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?

回答1:

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.



回答2:

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