CODEWITHSUNDEEP
cssinternet-explorersubmit
ollifant
ollifant

Reputation: 8606

Submit button style in IE

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).

Active state

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

Upvotes: 7

Views: 12352

Answers (4)

Kent Fredric
Kent Fredric

Reputation: 57354

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 )

Upvotes: 5

Kornel
Kornel

Reputation: 100100

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()).

Upvotes: 4

John Topley
John Topley

Reputation: 115322

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.

Upvotes: 1

BrynJ
BrynJ

Reputation: 8382

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.

Upvotes: 2

Related Questions