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

Have a look to this:

http://www.quirksmode.org/css/selection.html

To change properties of input.text, follow this:

http://bytes.com/clientsidescripting/dhtml/css/tutorials/introductiontocss/page1.html

Answer 2

How about setting up the look in the style sheet and then using something like:

< style >

.selected-look{color:somehex, border:; font-family:; background:;} // etc;

< / style>

$('#myTest').toggleClass('selected-look').select();

or $('#myTest').select().toggleClass('selected-look');

Answer 3

Tommy, did you find a solution?

Answer 4

I do not think there is any way to do this. The color of selected text is decided at the software/os level and is not something you can really control with javascript. The select api page http://api.jquery.com/select/ mentions several plugins that will tell you what text the user has selected. The only thing I can think of trying is when the user selects some text, you remove the text they have selected and insert the same text, marked up in a span that will highlight it in a different color. However, they will still see the blue as they are highlighting...

Answer 5

For my inputs i use this in my css files:

input[type="text"] { /* css properties */ }

the "text" can be replaced with "textarea", "submit"... even works with hover effects, exemple:

#area-restrita input[type='submit']:hover { background-color:#CCC; color:#FFF;}

Hope it can help.