CSS3 - How to style the selected text in textareas and inputs in Chrome?

EDIT: As @geca noted in the comments, this is a known WebKit bug. Let's hope it gets fixed soon!

The ::selection pseudo-element allows one to style the selected text. This works as expected but not for textareas and inputs in Google Chrome 15. (I'm not sure if it's a webkit or chrome issue since I can't use Safari on Linux.)

Here's a jsfiddle demonstrating this issue: http://jsfiddle.net/J5N7K/2/ The selected text at the pargraph is styled as it should be. The selected text in the textarea and input isn't. (But it is at Firefox.)

Am I doing something wrong or is it just not possible to style it at Chrome right now?

Solution 1:

Is a <div> with contenteditable an option? Functions just list a <textarea> for most things.

Demo: 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;
}

Output (Chrome):

Solution 2:

This is a known WebKit bug. Sorry, no solution thus far :)

Update: the WebKit bug was fixed on 10/13/2014.