View Full Version : Change textbox border color on hover

09-27-2011, 03:34 PM

I need your help.

Using Javascript, on mouseover/hover, I would like to change the boder color of my textbox from
rgb(142, 142, 142) to black: rgb(0, 0, 0,) then when I move the mouse pointer off the textbox, I would like it to change from black back to rgb(142, 142, 142).

I can't figure out where to start or how to get this going.

A little help from the experts is needed here.

Much thanks and appreciation for your time.



09-27-2011, 04:06 PM
Have you tried google yet? maybe with the search criteria "javascript onmouseover change background"

09-27-2011, 06:40 PM
onmouseover and onmouseout has a problem with child elements in some browsers (onmouseout triggers on the child element).

if you are going for a javascript solution i would suggest using jquery's mouseenter and mouseleave events instead, because of this.

the easiest solution in this case, however is to use css

<!DOCTYPE html>
.textbox {width:100px; height:20px;padding:5px;text-align:center} /* just some example styling */
.textbox {border:1px solid #8e8e8e}
.textbox:hover {border:1px solid #000}
<div class="textbox">Hello there</div>

09-27-2011, 07:26 PM
It is important to specify standards-compliant mode using
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
if :hover is to work on non-anchor elements in Internet Explorer.

(whatever that means)

09-27-2011, 07:50 PM
Indeed it is. Since IE:s logic is that it wil always use it's most ugly old trident engine for rendering in lack of doctype. :thumbsup:

So from now on I'm going to stick the HTML5-doctype before any html-tag when i write examples. :p

12-23-2011, 12:36 AM
(whatever that means)

GREAT!! Thanks to xelawho and Philip M

Had the similar issue -> IE8 textbox was not editable (when wrapper of my App has position:absolute). Click worked only in the border. Filled with color and transparent also did not work. With this doctype change the issue is fixed.

I appreciate it.