CSS3 – 如何在Chrome中的文本区域和输入中对选定的文本进行样式？

编辑：正如@geca在评论中指出的，这是一个已知的 WebKit bug.让我们希望它很快得到修复！

:: selection伪元素允许对所选文本进行样式化。这可以按预期方式工作，但不适用于Google Chrome 15中的文本区域和输入。
(我不知道这是否是一个webkit或chrome问题，因为我不能在Linux上使用Safari。)

这是一个jsfiddle演示这个问题：http://jsfiddle.net/J5N7K/2/
参考图片中选定的文字应该是样式。 textarea和input中的选定文本不是。 (但是在Firefox。)

我做错了什么，现在不可能在Chrome上进行风格化吗？

解决方法

是< div>有一个可选的选项？功能只列出< 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)：