How can I add padding to <input type="button">?

Question

It's been couple of months since I've done some serious HTML/CSS coding, so I've probably missed a lot of things, but today I stumbled upon a really weird thing.

When I try to apply padding to a <input type="submit">, it doesn't work anymore. I'm about 99% sure that I was able to do this, but now it seems as if it was impossible.

I even looked at one of my older projects, where I know I had padding on submit buttons, but they don't work anymore.

Here's a little demo of the problem

<input type="submit" value="Submit" style="padding: 5px 10px;">
<button type="submit" value="Submit" style="padding: 5px 10px;">Submit</button>

and how it looks in Google Chrome 15 on Mac

but it doesn't seem to work in Firefox 4 at all

Here's a link to the demo source on JSbin.com

I would bet that this was working about 6 months ago, but something must have changed. I've been using Windows Vista and OS X Snow Leopard with recent upgrade to Lion, but that doesn't seem like it.

Am I missing something?

edit: fixing the typo DID NOT help. The padding still isn't applied to the first button.

edit2: After going through Adobe Browserlab it looks like this is OS X specific problem. I'd still like to know how to do this even on OS X though.

Answer 1

This issue was apparent for me too on OS X Firefox. The solution is to disable the browser's default appearance before applying your own:

input {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
}

More info at: http://css-tricks.com/almanac/properties/a/appearance/