Search code examples
cssselectselectorhighlight

CSS highlight/selection color based on page focus


So, this isn't an absolute need, but I am curious and might like to use it at some point if it exists...

I've developed a site (not my design) in which certain areas of text have a text-shadow, and I noticed that when said text is highlighted, it's not very legible. I am aware of and utilizing the ::selection CSS selector along with appropriate browser prefixes to remove the text-shadow on highlight.

My question is whether there's anything that can override the highlighting defaults when text remains selected and the focus is removed from the page?

Example: I do a select-all and by default (Mozilla), selected text gets a blue background. I then ... say, start messing with Firebug, or open a smaller window over my browser. All the highlights turn gray. I can change the behavior of the blue with the ::selection property (color, background, text-shadow, etc.), but the gray's behavior remains unchanged. Does such a thing exist?


Solution

  • @feelinferrety the answer is NO.

    You can't change selection highlight colors on out-of-focus window. at least as of now (January 2019)

    As this explains how to do it on focused window using ::selection | ::-moz-selection
    https://css-tricks.com/almanac/selectors/s/selection/

    This clearly states that :window-inactive | :-moz-window-inactive will in fact work, BUT they don't work together ... because it's not standardized and therefore not developed
    https://css-tricks.com/window-inactive-styling/

    Although interesting is that you can for example change background-color of half of the page when the window goes out of focus...