CSS3 - 如何在textareas中选择文本并在Chrome中输入？

Question

编辑:正如@geca在评论中指出的,这是一个已知的WebKit错误.我们希望很快得到修复!

该::selection伪元素允许一个样式选定的文本.这可以按预期工作,但不适用于Google Chrome 15中的textareas和输入.(我不确定它是否是webkit或chrome问题,因为我无法在Linux上使用Safari.)

这里有一个jsfiddle演示这个问题:http://jsfiddle.net/J5N7K/2/ pargraph中选定的文本应该是它的样式.textarea中的选定文本和输入不是.(但它是在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

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

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

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