html - CSS: Percentage centering input with padding -
html (part of form):
<div class="container"> <a id="p1_icon"></a> <input id="p1" class="input" name="p1" type="password" placeholder="password"> </div>
css:
.container { width:80%; margin-left:10%; margin-right:10%; // unnecessary position:relative; // allow icon positioned in input } .input { width:100%; padding: 10px 15px 10px 30px; // icon sits in 30px padding-left. ... other styling } #p1_icon { @include sprite_index(20px, 20px, -1063px, -246px); // sass icon sprite position:absolute; top:9px; left:7px; }
the problem, of course, padding on .input
gets added 100% width, ends being wider container (and therefore not centered).
how can input
fill container entirely? can javascript fine, i'd mobile-friendly css solution if 1 exists. (note: need container auto-generated error messages. i'd container width stay @ 80% match other stuff.)
thanks.
add box-sizing: border-box
input:
http://jsfiddle.net/thirtydot/qatux/
.input { width: 100%; padding: 10px 15px 10px 30px; -moz-box-sizing: border-box; box-sizing: border-box; }
more information:
Comments
Post a Comment