How can I add padding to ?

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

enter image description here

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

enter image description here

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.

You've got a typo in your code. It should be `5px` in the ``, making it `` — Sasha, Oct 31 '11 at 22:21
As a note the only reason to use an `input[type="button"]` element would be with JavaScript. Because they are such a nuisance to style, just use an `a[href="#"]` element instead. As for `input[type="submit"]`...good luck. — zzzzBov, Oct 31 '11 at 22:22
when using padding on submit buttons do not forget that there is a nasty ie bug: http://latrine.dgx.cz/the-stretched-buttons-problem-in-ie to fix this use `overflow:visible` — topek, Oct 31 '11 at 22:25
@Sasha you're right, but it still doesn't solve the problem. — Jakub Arnold, Oct 31 '11 at 22:36
@Darth Worked fine for me when testing. Have you tested in another environment? — Sasha, Oct 31 '11 at 23:53
@Sasha yes, it seems to be a problem only on OS X. It works fine on Windows. I'd still like to know how to work this around for OS X though. — Jakub Arnold, Nov 01 '11 at 13:15
I know this is old, but after hitting this issue myself recently and eventually finding a fix I thought I'd post an answer. — Moob, Nov 13 '13 at 09:39

score 15 · Answer 1 · answered Nov 13 '13 at 09:39

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/

score 9 · Answer 2 · answered Oct 31 '11 at 22:20

9

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

You forgot the p in 5px. That is breaking the styling.

answered Oct 31 '11 at 22:20

Brandon

68,708
30
194
223

+1 (don't know if that's a question typo or the actual issue, but I gotta hand it to you, AWESOME eye :P) – JCOC611 Oct 31 '11 at 22:22
wow ... at first I was about to say "omg I'm so stupid" ... but then I found out it still doesn't work, even after you fix the typo :\ – Jakub Arnold Oct 31 '11 at 22:31

score 1 · Answer 3 · answered Mar 29 '13 at 00:52

You 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;
}

score 0 · Answer 4 · answered Mar 19 '19 at 19:21

0

You should use box-sizing property:

input[type="submit"] {
    box-sizing: content-box;
    -webkit-box-sizing: content-box;
}

answered Mar 19 '19 at 19:21

MAChitgarha

3,728
2
33
40

How can I add padding to ?

4 Answers4

Linked