solution of strange extra width on 100% width input on iphone

given the following html and css:

html:

<div class="formWrapper">
 <input id="myName" type="text"/>
 blar..
 blar...
 blar....
</div>

css:

#myName {
 width:100%;
 border: 1px solid white;
}

as the css speaks, it draws a white border gracefully in many browsers such as chrome, Firefox, and android 4.0.4 browser.

however it fails in iphone, it adds some extra width to it.

with some research, there is a messy but a good solution below:
first, we need to add a wrapper to our textfield

<div class="formWrapper">
 <div class="border"><input id="myName" type="text"/></div>
 blar..
 blar...
 blar....
</div>

next, we add border to this wrapper instead of <input >

#myName {
 width:100%;

 /*we remove all styles on input*/
 margin: 0px;
 padding: 0px;
 border: 0px;
}

.border {
 border: 1px solid white;
}
 

and now it looks nicely in iphone and other browsers~~
this method works in chrome, firefox, safari and also works in IE6 IE7 & IE8

leave me a comment if it helps you~