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

Question

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 th

Answer 1

Is there any chance that instead of using CSS pseudo-element you can use some jQuery.

take a look at this http://jsfiddle.net/J5N7K/6/.

if you don't understand the jQuery feel free to ask about it.

Answer 2

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):

Answer 3

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

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