Mobile Safari text input width bug?

Question

Take a look at these screenshots:

http://i.stack.imgur.com/1TFuj.png

http://i.stack.imgur.com/3fukT.png

I am having trouble getting text inputs to render as expected when set to 'width: 100%'. The text box extends too far to the right, past the right padding in the first screenshot and past the right margin of the div in the second screenshot.

Is this a bug in mobile Safari? If so, can anyone suggest a workaround? It seems to work fine in other mobile browsers and also in the desktop version of Safari. The problem seems limited to input elements, as select elements seem to have the proper width when styled in the exact same way.

Thanks in advance for any help!

Here's the code for the first screenshot:

<div style="padding-left: 1em; padding-right: 1em;">
    <div style="font-size: 1.2em;">
       Username:
    </div>
    <div>
        <input type="text" style="width: 100%; font-size: 1.1em;" id="tbUsername" name="tbUsername">
    </div>
</div>

And here's the code for the second (notice how the select elements, which are styled the exact same way, are unafflicted):

 <div class="item">
    <hr />
      <div class="title">Group Name</div>
      <div class="content">
         <asp:TextBox ID="tbGroupName" runat="server">
         </asp:TextBox>
      </div>
      <div class="confirmation">
         <img alt="" src="../Graphics/Check-icon.png" runat="server" id="imgConfirmGroupName"/>
     </div>
  <hr />
</div>

And here's the CSS:

.item
{

    padding-top: .5em;
    padding-bottom: .5em;

border-left: 1px solid black;
border-bottom: 1px solid black;

padding-left: 0.5em;


}

.item .title
{
    float: left;
    width: 25%;
}

.item .content
{
    float: left;
    width: 67%;
}

.item .confirmation
{
    float:left;
    width: 8%;
}

.item .confirmation img
{
    padding-left: .3em;
    height: 1.1em;
}

.item hr
{
    clear: both;
    visibility: hidden;
    padding: 0;
    margin: 0;
}

.item select
{
    width: 100% !important;
    font-size: 0.9em;
}

.item input
{
    width: 100% !important;
    font-size: 0.9em;
}

Solution

Maybe this property on inputs will help you?

input[type="text"]{
   -moz-box-sizing:    border-box;
   -webkit-box-sizing: border-box;
    box-sizing:        border-box;
}

Comments

[DA.]

I'm suggesting that your INPUT tag may have padding on it--either default padding or perhaps padding inherited from other CSS somewhere. Try setting it to 0 to see if that fixes the problem.

[nw.]

Looks like you hit the nail on the head, mobile safari seems to add some padding to the default style for text inputs. Thanks for the help!

[Kaganar]

Be sure to explicitly set your input type attribute -- otherwise this may not work for you.

[GajananB]

You should probably think about applying this universally. Even in the <form>, there could be other input types like "tel" or "email". Also, developer prefixes are pretty much dead - http://caniuse.com/#feat=css3-boxsizing

[DR01D]

I tried box-sizing in an Ipad 1 and it didn't work. So I added -webkit-box-sizing: and the prefix fixed it. Thanks so much!