What is the default CSS border property for an HTML button in IE?

Question

I have the below code:

<button onmousemove="this.style.border='2px #555555 solid';" 
   onmouseout="this.style.border='';">Test</button>

On mousemove, it correctly changes the border as specified. On mouseout my intention is to change the border back to the original. This works in Gecko based browsers but not in IE. IE removes all the borders and the button becomes 2D.

How do I get back the original 3D look of the button?

Note: For debugging, I tried alert(this.style.border) the get the value of the original border. It shows it blank. So the original border value seems to be blank. But setting to blank does not bring the original look back. :(

Answer 1

As far as I know, there is no way to restore the original OS look once the element's border is set, although it strikes me as odd that even emptying border doesn't do the job. Ah well. The OS style is not just a classic border, but includes a black outline (depending on OS visual settings, even more than that).

Seeing as IE < 8 doesn't understand outline, I think the best workaround would be putting an element around the button, and highlighting that on hover.

Answer 2

Try setting and clearing a class for the element and assigning the border value to the class. Just like below:

.buttonHover
{
  border: 2px #555555 solid
}

<button onmousemove="this.className='buttonHover';" onmouseout="this.className='';">Test</button>

Note that this simple JS code will break your existing classes assigned to the element if there are any. If you are to use additional classes, please add a comment declaring the situation and I'll change the code accordingly.

Answer 3

Would recommend using CSS for the same rather than javascript. You can do the following. Define only the hover propery of the button.

HTML :

<button value="Hello">Hello</button>

CSS :

button:hover
{
    border:1px solid #333;
}

Answer 4

I think that what you are looking for can be found in the bowers user agent CSS. Here is a table that will give you a good idea of whats going on with different browsers http://css-class.com/test/css/defaults/UA-style-sheet-defaults.htm .