title: <input type="submit"> padding bug on Safari mobile?
body: <p><em>(This is similar to the (also unanswered) question <a href="https://stackoverflow.com/questions/3430506/">#3430506</a>, but applies to input tags instead of HTML5  elements.)</em></p>
  
  <p>On &lt;input type="submit"&gt; 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).  </p>
  
  <p>Currently I'm trying the following to remove it:</p>
  
  <pre><code>/* 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;
  }
  </code></pre>
  
  <p>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. </p>
  
  <p>Try viewing these on desktop Safari then iPhone:<br>
  <a href="http://deleri.com/test.html" rel="nofollow noreferrer">http://deleri.com/test.html</a></p>
  
  <p>(Safari Mobile screenshot for those without an iPhone:)<br>
  deleri.com/safari.png</p>
  
  <p>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?</p>