为啥 CSS3 伪 ::selection 不会更改所有部分的颜色？

Posted 2023-03-06

【中文标题】为啥 CSS3 伪 ::selection 不会更改所有部分的颜色？

【英文标题】：Why does the CSS3 pseudo ::selection not change the color for all parts?为什么 CSS3 伪 ::selection 不会更改所有部分的颜色？

【发布时间】：2012-02-10 14:50:24

【问题描述】：

为什么 CSS3 伪元素selection 不改变高亮的所有部分？正如您在此屏幕截图中看到的那样，我选择了页面的一部分，并且选择的部分是默认的亮蓝色：

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

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

输入（文本、复选框等）和空白区域的突出显示似乎没有改变。有谁知道这是为什么，有没有办法为页面的每个部分更改它，以使突出显示颜色保持一致？我正在使用 Chrome。

【参考方案1】：

::selection 伪元素在 Chrome/Safari 中无法正常工作。 <input> 元素将是标准的高亮颜色。这是一个非常古老但仍然很突出的错误：

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

我能想到的唯一解决方法是使用 contenteditable 元素而不是 <input> 元素。

这是我创建的一个演示：http://jsfiddle.net/ThinkingStiff/FcCgA/ 我写了一篇关于它的帖子：https://***.com/a/8529323/918414

【讨论】：

啊，我明白了。谢谢你。希望 webkit 团队能尽快修复它，因为这是一个非常烦人的错误。顺便说一句，您是如何在上面链接到的 jsFiddle Demo 上获得那个 Stack Overflow 小横幅的？我在您的 jsFiddle 的 html 框中的任何地方都看不到它的标记...

@Nathan 在 HTML 框中向下滚动。

我很想提交一个新错误，以便使用正确的术语（伪元素，而不是伪类）。

@BoltClock 也许会引起某人的注意，这仍然是一个问题。

在 Chromium 上检查时，我看到有人打开了一个用于闪烁的模拟错误 (code.google.com/p/chromium/issues/detail?id=305920)，但是这被这个问题所欺骗：code.google.com/p/chromium/issues/detail?id=167676。我刚刚对该错误添加了一条评论（例如，似乎还没有讨论 webkit 修复），所以希望这个问题会得到一些关注并最终在 Chrome 中得到解决。如果您想解决此问题，请在此处分享您的想法。