如何设置自定义::选择样式,但保持浏览器默认的文本选择颜色



刚刚遇到一些令人惊讶的事情。如果你这样做:

footer::selection {
color: white;
}

删除高亮显示文本的浏览器默认背景色。它的行为就像您也设置了background-color: transparent一样。(见下面的演示。(

问题:设置自定义::selectioncolor时,如何保留或恢复系统默认文本选择background-colour

(这个答案列出了不同系统上使用的各种选择背景色。但我不只是想选择一种,我希望它只是当前系统的默认颜色。(

演示:

body {
background: navy;
color: gray;
}
p.custom::selection {
color: white;
}
<p>Regular paragraph</p>
<p class="custom">Paragraph with text color changed in ::selection</p>

此行为已在规范中编码,如下所示:

UA必须仅在作者未指定colorbackground-color时才为::selection使用自己的高亮颜色。

(在去年之前,这句话一直说"应该",当时它被改为"必须"。没有任何浏览器实现::selection的某些版本,但现在还没有遵循这条规则。(

系统颜色只作为用户定义的值(可能只是系统默认值,也可能不是系统默认值(暴露给CSS,而不是系统定义的默认值,因此无法提前知道。因此,正如CBroe所暗示的,这个规则是为了确保只更改其中一个不会导致它与另一个的用户定义值冲突,从而导致对比度问题。规范中对该规则的实际编码是出于遗留的原因,但在此类讨论中,首先引用了浏览器表现出这种行为的基本原理。

存在许多标准化和非标准化的系统颜色,但这些颜色的行为因浏览器而异,也因平台而异。尝试使用其中任何一种都可能会产生意想不到的结果,从使用了意想不到的颜色到被浏览器完全忽略。另外,正如我提到的,系统颜色无论如何都只作为用户定义的值公开。CSSWG以前曾讨论过改进这一点的潜在方法;这是最近的一段对话。

我们鼓励您应用与自定义选择前景色互补的自定义选择背景色。

最新更新