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
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...
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.