为什么CSS3伪元素::selection不能改变所有部分的颜色？

Question

为什么CSS3伪元素selection不会更改高亮的所有部分呢？如您在此截图中所见，我已选择页面的一部分，而选择的部分中有默认的明亮蓝色:

这是我正在使用的CSS，它位于我的CSS文件的顶部:

::selection { background: #3B3B3B; color: #fff; }
::-moz-selection { background: #3B3B3B; color: #fff; }

看起来输入框（文本、复选框等）和空白处的高亮颜色没有变化。有人知道这是为什么吗？是否有一种方法可以改变整个页面的高亮颜色，使其保持一致？我正在使用Chrome浏览器。

- Nathan

Answer 1

::selection 伪元素在 Chrome/Safari 中无法正常工作。对于 <input> 元素，将使用标准的高亮颜色。这是一个非常古老但仍然未解决的错误：

https://bugs.webkit.org/show_bug.cgi?id=38943

我能想到的唯一解决方法是使用可编辑元素contenteditable代替<input>元素。

这里是我创建的演示：http://jsfiddle.net/ThinkingStiff/FcCgA/
以及我写的一篇文章：https://dev59.com/MGoy5IYBdhLWcg3wnPSJ#8529323

- ThinkingStiff

---

啊，我懂了。谢谢你的帮忙。希望 Webkit 团队尽快修复这个非常烦人的错误。顺便问一下，你是怎么在你上面链接到的 jsFiddle Demo 上得到那个小的 Stack Overflow 横幅的？我在你的 jsFiddle 的 HTML 区域中没有找到相关标记... - Nathan

@Nathan 在 HTML 框中向下滚动。 - ThinkingStiff

我很想提交一个新的缺陷报告，以便使用正确的术语（伪元素而非伪类）。 - BoltClock

@ThinkingStiff，你是怎么让JsFiddle链接和你的自定义URL这么漂亮地放在一起的？太有品位了！请告诉我。 - Camilo Martin

在 Chromium 上查看时，我发现有人为 blink（https://code.google.com/p/chromium/issues/detail?id=305920）开了一个类似的 bug，但是这个问题已被转移到这个问题上：https://code.google.com/p/chromium/issues/detail?id=167676。我刚刚在那个 bug 上添加了一个评论（例如，webkit 修复似乎还没有在那里讨论），所以希望这个问题能得到解决并最终在 Chrome 中解决。如果你想解决这个问题，请在那里分享你的想法。 - Jon