CSS3 - 如何在 Chrome 中的文本区域和输入中设置所选文本的样式？

Question

编辑：正如 @geca 在评论中指出的，这是一个已知的 WebKit bug。希望它能尽快修复！

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

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

我是否做错了什么，或者现在无法在 Chrome 上设置它的样式？

Answer 1

带有 contenteditable 的

是一个选项吗？函数仅列出大多数内容的 </code> 。

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

HTML：

<textarea><textarea> Doesn't highlight properly in Chrome.</textarea><br />
<input value="<input> Doesn't highlight properly in Chrome." />
<p><p> Highlights just fine in Chrome!</p>
<div id="div-textarea" contenteditable><div contenteditable> 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 错误已于 2014 年 10 月 13 日修复。

Answer 3

您是否有可能不使用 CSS 伪元素而使用一些 jQuery。

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

如果您不明白 jQuery，请随时询问。

Answer 4

使用这个：

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

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