IE: Restoring default border for text input elements leaves left border color intact

Affects: IE 5.5, 6, 7

In IE, you can style the border of text input elements (INPUT.text, INPUT.password, TEXTAREA). For example, the elements below will have their borders set to "2px solid red" when mouseover'd and then back to their default look when mouseout'd (via "border: 2px inset").




Look close. Notice that the color of the left border remains "red" when mouseout'd. That's the bug.

WORKAROUND: You must clear the left border's color value (style.borderColorLeft="").




NOTE: This method of restoring the default border of text input elements is only needed for IE and doesn't work properly for other browsers. Mozilla/Firefox/Opera need only clear the border value (style.border="") to restore the default border. Additionally, the default border of "2px inset" is system dependant, as the default Windows XP theme doesn't use "2px inset" as its default border for input elements. This bug is just for demonstration purposes, really.

BUT: Why not just set the border to "2px inset threedhighlight" to restore the original look? You can, sure. But, if you look very closely at the border (take a screenshot and zoom in), you'll notice it isn't quite the same as the default border.

Jason Brunette jbrunette@excel.net