Default submit button style for form

Question

Now I know this issue is over-talked about but I cannot seem to find a question that addresses this little gem directly so here goes...

In Opera and IE when a form has focus the default submit input gets some sort of highlight. Like outline is when you have tab focused onto an element.

However, unlike the tab one (dotted lines inside or around which to me is nice and user friendly and so WANT it for my users) this one has some bizarre designs...

Firefox has its own problems but at least you can customise it. It reserves the space for the "highlight"/"border" or whatever you want to call it which means that your input will be bulker than any other browser. - why can't it do what it does for the anchors and have the highlight around the blasted thing?

Opera is odd in itself (Opera 10) since it makes the outline "highlight" whatever black. Now this isn't an issue UNLESS YOU HAVE A BLACK BACKGROUND... and it replaces the original border which is just palmface worthy... what were they thinking.

IE is like Firefox but no known way to customise it..

Now for the question: Is there a way to set the bloody colour in Opera for this focus event (which would solve that issue) or to have it in firefox without having to bloat the design in every other browser or a way to make IE conform at all.

Many thanks in advance

Answer 1

button:active{background-color:#f00;}
button:hover{background-color:#0f0;}

That should allow you to control the visual interaction of a button. To target a specific button provide an id value in your HTML on the button tag.

Answer 2

try doing

<input type='submit' autocomplete='off' style='outline:none;'/>

this worked for me in text fields - I'm not sure if it carries over to submit or button elements but it's worth a try.

Answer 3

I tried and tried but I don't think this is possible.

Answer 4

Kinda hackish, but definitely works..

<input type='submit' onfocus="blur()" />