Adding padding to submit buttons on Mac OS X

Question

I'm having trouble adding padding to a submit button. I've created an ultra simple example in a JSFiddle:

http://jsfiddle.net/yxr197pa/1/

Here's the code for it:

HTML:

<input type="submit" value="Submit" />

CSS:

input {
    padding: 20px;
}

I must just not be getting something really simple, and I'm kind of embarrassed I can't figure it out. It seems like no one else is having this problem, as I've searched quite extensively. I've even seen examples of people adding padding with no issues. Would really appreciate any help. Thank you!

Update

To clarify the problem for those who might be confused by what I'm asking: the code above doesn't alter the padding of the button in any way. It appears there's default padding applied to the button, but the padding I've specified simply doesn't show. Here's a picture depicting what I see when I enter the code above:

http://i.imgur.com/9RxGJUo.png

This issue has been fixed in an answer below, but the underlying cause is still a mystery to me. It appears to have something to do with my computer. I'm using a fully up to date Mac OS X. My PC, on the other hand, renders the example above completely normally. It doesn't matter what browser I use on my Mac either, it still doesn't render the padding that I'm specifying.

That's not the end of the story though, because after analyzing the source code on other websites, I found submit buttons that were rendering padding correctly on my Mac, with effectively identical code. See here:

http://htmlandcssbook.com/code-samples/chapter-14/styling-submit-buttons.html

So why is the padding being rendered sometimes and not others?

Answer 1

Based on the comments above, you said you're on a Mac (OS X)..

Therefore you need to set the the appearance property of the input element to none in order for the padding to work. I went ahead and added -webkit/-moz vendor prefixed properties too:

input {
  padding: 20px;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
}

<input type="submit" value="Submit" />

This just seems to be one of those strange cross-browser inconsistencies, because this doesn't appear to be an issue on Windows.

Answer 2

It looks to me like you cannot add padding to an input.

I think the closest you can get is increasing the height and the width of the input.