Changing the highlight color when selecting text in an HTML text input.

Question

Hey folks!

I've been looking for this throughout the web and can't even find anyone else even asking this, let alone a solution...

Is there a way to change the color of the highlight area within a a text input when text is selected? Not the highlight border or the background, but the portion that appears around the text when you have the text actually selected.

Answer 1

If you are looking for this:

Here is the link:

http://css-tricks.com/overriding-the-default-text-selection-color-with-css/

Answer 2

This appears to do what you're after, via javascript: http://www.dhtmlgoodies.com/index.html?whichScript=highlight-active-input

I can't vouch for it, but a quick test in FF3.5.7 seems to work OK. Good luck.

Answer 3

Thanks for the links, but it does seem as if the actual text highlighting just isn't exposed.

As far as the actual issue at hand, I ended up opting for a different approach by eliminating the need for a text input altogether and using innerHTML with some javascript. Not only does it get around the text highlighting, it actually looks much cleaner.

This granular of a tweak to an HTML form control is just another good argument for eliminating form controls altogether. Haha!

Thanks again!

E