HTML input element wider than Containing Div

0 Shares
0
0
0
0
0
0
0

Following code is not working

<div style="height:25px; width: 150px;">
     <input type="text" style="height:100%; width:100%"  />
</div>

You can use box-sizing:border-box to take care of this. Just put the following in your css file:

input{box-sizing:border-box} 

It means that border on the input box is actually inside the width of the input rather than being added onto the outside. This is what is making the input larger than the container.
Paul Irish has really good post explaining this technique http://paulirish.com/2012/box-sizing-border-box-ftw
The points he makes about padding also apply for the border.
There’s even a compass mixin to make it easier to support older browsers. (http://compass-style.org/reference/compass/css3/box_sizing/)