CSS3 - 如何在 Chrome 中设置 textareas 中选定文本和输入的样式？

Question

编辑：正如@geca 在评论中指出的那样，这是一个已知的WebKit 错误。 让我们希望它尽快得到修复！

::selection伪元素允许为所选文本设置样式。 这可以按预期工作，但不适用于 Google Chrome 15 中的文本区域和输入。（我不确定这是 webkit 还是 chrome 问题，因为我无法在 Linux 上使用 Safari。）

这是一个演示此问题的jsfiddle：http://jsfiddle.net/J5N7K/2/ 段落中选定的文本的样式应为应有的样式。 文本区域和输入中的选定文本不是。 （但它位于 Firefox。）

我做错了什么还是现在无法在 Chrome 上设置样式？

Answer 1

<div>具有contenteditable选择权？ 函数只为大多数事情列出<textarea> 。

演示： http ： //jsfiddle.net/ThinkingStiff/FcCgA/

HTML：

<textarea>&lt;textarea&gt; Doesn't highlight properly in Chrome.</textarea><br />
<input value="&lt;input&gt; Doesn't highlight properly in Chrome." />
<p>&lt;p&gt; Highlights just fine in Chrome!</p>
<div id="div-textarea" contenteditable>&lt;div contenteditable&gt; Highlights just fine in Chrome!</div>

CSS：

textarea, input, p, div {
    width: 400px;
}

#div-textarea {
    -webkit-appearance: textarea;
    height: 32px;
    overflow: auto;
    resize: both;
}

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

输出（Chrome）：

Answer 2

这是一个已知的WebKit错误 。 对不起，迄今为止没有解决方案

更新：WebKit错误已于10/13/2014修复。

Answer 3

用这个：

::-moz-selection {
  background: var(--blue);
  color: var(--white);
}

::selection {
  background: var(--blue);
  color: var(--white);
}

Answer 4

是否有可能不使用CSS伪元素，你可以使用一些jQuery。

看看这个http://jsfiddle.net/J5N7K/6/ 。

如果您不明白jQuery随时可以询问它。