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

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:

歌剧 15.0.1147.130:

Safari 5.34.57.2:

结果:Gecko 支持的浏览器

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

火狐 22.0:

结果:三叉戟驱动的浏览器

在 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 无关，但确实适用于所有伪元素，找不到答案。