Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

<input type="submit"> padding bug on Safari mobile?

(This is similar to the (also unanswered) question #3430506, but applies to input tags instead of HTML5 elements.)

On <input type="submit"> buttons, the iPhone/mobile Safari browser adds padding to the left and right. This doesn't happen on the desktop version, nor any other mobile/desktop Webkit browsers I've tried. It appears to add the font-size in px to each side (i.e. 14px font means total width is 14px + width of text + 14px).

Currently I'm trying the following to remove it:

/* webkit user-agent stylesheet uses input[type="submit"] */

form input[type="submit"] { /* more specific to override webkit */ 
   -webkit-appearance:none;  
   -webkit-border-radius:0px;
   margin:0;  
   padding:0;  
   border:0;  
   display:block;
}

I've seen lots of responses about using -webkit-appearance:none... this makes no difference. Neither does removing rounded corners. I made a page to demo how the desktop version renders various -webkit-appearance objects; all have -webkit-border-radius:0 and the above code applied.

Try viewing these on desktop Safari then iPhone:
http://deleri.com/test.html

(Safari Mobile screenshot for those without an iPhone:)
deleri.com/safari.png

While I'd love to know why this bug occurs, right now I'm more concerned about fixing it. I've tried every type of display/overflow/box-sizing/-webkit-anything-/width:auto/text-indent option imaginable, and can't fix it by manually setting the width (final width needs to be percentage-based, and the strange padding still applies). I'm starting to wonder if it's some obscure property, or if the user agent stylesheet isn't being overwritten. Any thoughts?

like image 788
pixi Avatar asked Aug 18 '10 21:08

pixi


1 Answers

Do you have control over the form? aka: did you manually enter the form?

If so add either a id or class tag to it

<input type="submit" id="submit" value="submit">

then adjust your css to

form input #submit { /* more specific to override webkit */ 
   -webkit-appearance:none;  
   -webkit-border-radius:0px;
   margin:0;  
   padding:0;  
   border:0;  
   display:block;
}
like image 183
canintex Avatar answered Sep 19 '22 16:09

canintex