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"> <button type="submit" value="Submit">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.
74 Answers
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; } <input type="submit" value="Submit">
You forgot the p in 5px. That is breaking the styling.
2You need to remove browser default style button first, to do that i usually restyle it with change the background and border. Here is the snippet style i use if want to change the button
input[type="submit"], input[type="reset"] { background: none repeat scroll 0 0 #8C8C69; border: medium none; cursor: pointer; display: inline-block; padding: 7px; text-transform: uppercase; } You should use box-sizing property:
input[type="submit"] { box-sizing: content-box; -webkit-box-sizing: content-box; } 
