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

Question

问题

在-webkit- 和-moz- 浏览器中使用以下内容根本无法正常工作：

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

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

 

结果：支持 WebKit 和 Blink 的浏览器

在 Chrome、Opera 和 Safari 中，::selection 的 background-color 呈现为 50% 的 alpha 但字体颜色正确。

Chrome 29.0.1547.62：

Opera 15.0.1147.130：

Safari 5.34.57.2：

 

结果：Gecko 驱动的浏览器

在 Firefox 中，整个 ::selection 规则被忽略。 ::selection 的 background-color 恰好是白色的，因为 #exampleElement 的黑暗 background-color （感谢@BoltClock 注意到这一点）

Firefox 22.0：

 

结果：支持 Trident 的浏览器

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

Internet Explorer 10.0.9200.16660：

 

这只是这些渲染引擎/浏览器的一个缺陷，还是有我不知道的 -webkit- 和 -moz- 替代方案？

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

Answer 1

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

正如this answer 中已经提到的，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 样式中，以确保在适用时始终使用它。

希望有帮助！