Styling the selection color of an input type=text, possible?

Question

Having an input

<input type="text" id="myTest" value="bla bla bla"/>

and doing this (using jQuery)

$('#myTest').select();

causes "bla bla bla" to be selected with default dark blue selection color.

Now, is there any way I can change this color using css? css3 can change selection using for instance

::-moz-selection {
  background: #ffb7b7;
}

but this only works on text in other elements, not in html inputs.

Any ideas?

/T

Answer 1

Works for me in Firefox (latest version) but it doesn't work in Webkit. Here's a test: http://jsfiddle.net/Gp8Rr/

I tested it in latest versions of Chrome, Safari, and Firefox, and Firefox was the only one that worked. Maybe a bug, or maybe Webkit doesn't allow you to style that part of their UI?

---

Just an update here, to go into a little more detail. ::selection is a non-standard pseudo-element, which means that even though most browsers support it you have no guarantee that they will continue to do so, or that new browsers will support it. So go ahead and use it, but don’t make it essential to the useability of your site. There’s more on this topic over at the MDN.