::在浏览器中选择背景颜色和颜色渲染

Question

问题

使用以下功能只是在-webkit-和-moz-浏览器中无法正常运行：

#exampleElement {
    background-color: red; /* For example */
}

#exampleElement ::selection {
    color: black;
    background-color: white;
}

结果：WebKit和Blink驱动的浏览器

在Chrome，Opera和Safari中，::selection的{​​{1}}呈现为50％alpha，但字体颜色正确。

Chrome 29.0.1547.62：

Opera 15.0.1147.130：

Safari 5.34.57.2：

结果：Gecko驱动的浏览器

在Firefox中，忽略整个background-color规则。由于::selection的黑暗::selection，background-color的{​​{1}}恰好是白色的（感谢@BoltClock注意到这一点）

Firefox 22.0：

结果：支持Trident的浏览器

在Internet Explorer中，（你会相信）一切都完美呈现。

Internet Explorer 10.0.9200.16660：

这只是这些渲染引擎/浏览器的缺陷还是我不知道的#exampleElement和background-color替代品？

我在jsFiddle上保存了一个这样的示例，供人们查看：http://jsfiddle.net/BWGJ2/

Answer 1

根据quirksmode.org，-webkit-selection和-moz-selection确实可用。我刚刚使用Chrome（18）和Firefox（13）对其进行了测试，并且可以确认它适用于Firefox，但我在Chrome上没有成功使用-webkit-selection（它忽略了它），并根据{{3它不存在（答案是::selection 应该也适用于所有浏览器，但对我来说也不行。）

正如this SO question中已经提到的那样，Chrome会强制选择透明，但您可以使用

解决此问题

background:rgba(255, 255, 255, 0.99);

有关详细信息，请通过tw16

结帐链接的答案

---

此外，这适用于FF：

::selection { /* stuff */ }
::-moz-selection { /* stuff */}

但这不是：

::selection, ::-moz-selection { /* stuff */ }

但也许这与::selection无关，但适用于所有伪元素，无法找到答案。

Answer 2

有browser-dependent versions。您使用的版本是标准的CSS3方式，但随后得到dropped from the spec。我不知道它的浏览器支持......

还需要考虑其他事项：基于ID的CSS选择器可能会“outweigh”基于伪类的选择器，导致基于ID的CSS始终优先。因此，请尝试将!important添加到::selection样式中，以确保在适用时始终使用该样式。

希望有所帮助！