Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

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

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

like image 837
Tommy Avatar asked Sep 07 '25 08:09

Tommy


1 Answers

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.

like image 181
Timothy Miller Avatar answered Sep 10 '25 16:09

Timothy Miller