Submit button style in IE

Question

I have a question to the submit- button behavior of internet explorer. If I load the page everything is fine - the submit button looks as it should.

Inactive state http://img58.imageshack.us/img58/7214/inactiveci9.jpg

But if I click inside the FORM, the submit button gets some additional style which I don't like (see image for more information).

How can I disable this behavior. I'm using IE7 under Vista.

Solution 1

CSS:

input:focus, 
input:active, 
input:hover 
{ 
   outline: none; 
   border: 1px solid; 
} 

No guarantees, but that is supposed to stop IE being stupid.

You should extend the above style a little, for instance, change background color or border color to give an alternative change indicating focus.

( press tab, you'll see it move ;) , the additional style is an indicator showing what action will be performed upon pressing ENTER )

Solution 2

This indicates that button is focused. It's needed for keyboard navigation. You should't remove it.

If you however value looks of your design over usability and accesibility, then try hideFocus property (at least it's not as harmful as blur()).

Solution 3

I have encountered the same behaviour in IE. As far as I know, the only way to prevent that behaviour is to set the button border property to none - not ideal as that obviously effects the style of your button.

Solution 4

This is just standard Windows behaviour where the default button—i.e. the button that's clicked if you press Enter—gets a slightly thicker border.

View more solutions

Comments

[John Topley]

Why is IE being stupid? It's just following standard Windows UI conventions.

[John Topley]

@Kent - Where do the W3C specify what submit buttons should look like?