为什么CSS3 pseudo :: selection不会改变所有部分的颜色？ [英] Why does the CSS3 pseudo ::selection not change the color for all parts?

问题描述

为什么CSS3伪元素选择不会更改突出显示的所有部分？正如你在这个屏幕截图中看到的，我选择了页面的一部分，并且选择的部分是默认的鲜艳的蓝色：

Why does the CSS3 pseudo-element selection not change all parts of the highlight? As you can see in this screenshot I have selected part of the page, and parts of the selection are the default bright blue color:

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

This is the CSS that I'm using, it is at the top of my CSS file:

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

这看起来像是输入的高亮（文本，复选框等）更改。有人知道为什么这是，并有一种方法来改变它每部分的页面，以使高亮颜色是一致的？

It seems like the highlight for inputs (text, checkboxes, etc.) and white space does not change. Does anyone know why this is, and is there a way to change it for every part of the page so the highlight color is consistent? I'm using Chrome.

推荐答案

:: selection 元素在Chrome / Safari中无法正常使用。 < input> 元素将是标准的高亮颜色。这是一个非常古老，仍然突出的bug：

The ::selection pseudo-element doesn't work properly in Chrome/Safari. <input> elements will be the standard highlight color. It's a very old and still outstanding bug:

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

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

The only workaround I've been able to come up with is using contenteditable elements instead of <input> elements.

我创建的演示： http://jsfiddle.net/ThinkingStiff/FcCgA/

和一个帖子我写了这篇文章： http://stackoverflow.com/a/8529323/918414

这篇关于为什么CSS3 pseudo :: selection不会改变所有部分的颜色？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！