CODEWITHSUNDEEP
iphonecsswebkitmobile-safari
bushytop
bushytop

Reputation: 391

iPhone <button> padding unchangeable?

A HTML5 <button> in Mobile Safari seems to have fixed, unchangeable left and right padding. Here's a demo plus how it looks in Safari 5 and iOS4.

How can I get rid of that padding?

Upvotes: 14

Views: 12714

Answers (7)

mmm111mmm
mmm111mmm

Reputation: 4125

Change the padding on the inside button node. The node can simply be the plain text within.

button {
  padding: 0px;
}

button > * {
  padding: 4px;
}

Upvotes: 0

Rusher
Rusher

Reputation: 507

That's the bug|feature of all webkit browsers. Try adding

box-sizing: conter-box;

Upvotes: 0

YMMD
YMMD

Reputation: 3780

I just figured out that the "additional padding" is always 1em. In case you use an absolute number for your font-size, you can set the button's font-size to 0 and reset it for the inner element:

button{
   font-size:0;
}
button span{
   font-size:14px;
}

<button><span>Submit</span></button>

Upvotes: 11

SimplGy
SimplGy

Reputation: 20437

The "cleanest" solution I've found requires no extra elements but assumes some fixed sizing on your part. Nod to thomp for the negative margin idea. This is similar. This will counter the extra padding:

text-indent:-6px;

Upvotes: 0

M&#228;rt
M&#228;rt

Reputation: 9

After messing around with the buttons for a week I dumped them and now I use div-s instead. If you add display: inline-block; to the div-button it can also be centered like a button.

Upvotes: 0

thomp132
thomp132

Reputation: 11

I've overcome this problem by wrapping <button> contents in a <div> like so...

<button><div>Submit</div></button>

or by using jQuery and adding the following to a script...

$('button').wrapInner('<div/>')

...and including the following styles to the page

button { padding: 0; }
button > div { margin: 0 -1em; padding: 0.4em 0.8em; }

Note that you can change the inner div's padding to suit your needs. Also note that this will only work with <button> elements and not <input type="button"> or related elements as they cannot contain child elements.

Upvotes: 1

David Kaneda
David Kaneda

Reputation: 5510

As long as you don't need the native control button look, and are OK doing your own style in CSS, just add -webkit-appearance: none, and you should get full control over the element.

You could also try -webkit-appearance: button or -webkit-appearance: pushbutton to try to get the default styling, too.

You can see some of these at work here.

Upvotes: 16

Related Questions