基于页面焦点的 CSS 高亮/选择颜色答案

【问题标题】：CSS highlight/selection color based on page focus基于页面焦点的 CSS 高亮/选择颜色
【发布时间】：2013-08-21 13:58:36
【问题描述】：

所以，这不是绝对需要，但我很好奇，如果它存在，我可能想在某个时候使用它......

我开发了一个网站（不是我的设计），其中某些文本区域具有文本阴影，我注意到当所述文本被突出显示时，它不是很清晰。我知道并利用 ::selection CSS 选择器以及适当的浏览器前缀来删除突出显示的文本阴影。

我的问题是，当文本保持选中状态并且焦点从页面中移除时，是否有可以覆盖默认突出显示？

示例：我选择全选，默认情况下 (Mozilla)，所选文本的背景为蓝色。然后我......说，开始弄乱Firebug，或者在我的浏览器上打开一个较小的窗口。所有高光变为灰色。我可以使用::selection 属性（颜色、背景、文本阴影等）更改蓝色的行为，但灰色的行为保持不变。有这种事吗？

【问题讨论】：

【解决方案1】：

是的，您可以将选择器与 ::selection 一起使用

例如，对灰色类的特定段落尝试此操作

.gray p::-moz-selection { color: gold;  background: red; }
.gray p::selection      { color: gold;  background: red; }

甚至是一个带有灰色类的 div

.gray div::-moz-selection { color: gold;  background: red; }
.gray div::selection      { color: gold;  background: red; }

我不确定与它的兼容性，但它适用于我在 FF、Chrome 和 IE9 中

【讨论】：

文本阴影：无；但我认为他的问题更多是关于如何使用 ::selection 选择特定元素，他确实说过“我可以使用 ::selection 属性（颜色、背景、文本阴影等）改变蓝色的行为”
更多的是关于我可以覆盖哪些默认值。 ::selection 属性使我能够处理网站访问者如何查看他们突出显示的文本。但是，当焦点从网站上移开时（但页面仍然可见），此覆盖不会继续。

【解决方案2】：

@feelinferrety 答案是否定的。

您无法更改失焦窗口上的选择突出显示颜色。至少截至目前（2019 年 1 月）

因为这解释了如何在焦点窗口上使用::selection | ::-moz-selection
https://css-tricks.com/almanac/selectors/s/selection/

这清楚地表明:window-inactive | :-moz-window-inactive 实际上可以工作，但它们不能一起工作......因为它没有标准化，因此没有开发
https://css-tricks.com/window-inactive-styling/

虽然有趣的是，例如当窗口失焦时，您可以更改页面一半的背景颜色...

【讨论】：