submit button 'depressed' state on focus -- potential chrome bug?

Question

What's with submit buttons in Chrome?

<input type='text' placeholder='Dummy Input'/>
<input type='submit'/>

The active 'depressed' state of the submit button will only occur if the button does not have focus. To reproduce, see this JSFiddle. In fact, the text-field isn't really even necessary, only to allow tab focus into the submit button.

So go ahead, place cursor in text field, press tab and click submit while the button is focused (orange). The event fires, but the button does not depress.

Pressing spacebar when focused instead of click will depress the button. (thx @Ineentho) What gives?

Note: I've submitted this to the Chrome Issue Tracker

Answer 1

You could use some javascript/jquery to un-focus the textbox on hover so the :active properties would be applied when clicked.

$("input[type=submit]").hover(function(){
     $(this).blur();
});

Also, you could apply css to the :focus pseudoclass, so the outline would always be invisible.

input[type=submit]:focus {outline:none;}

See this fiddle: http://jsfiddle.net/qahcJ/1/

UPDATE

I think that you can't solve this without Javascript hack, so here is a much simpler way to do it. Just use this piece of code:

$("input[type=submit]").bind("mousedown",function(e){
    return false;
});

Demo: http://jsfiddle.net/gFMTt/