VoilĂ ! Now we can safely set the width of form fields to 100% without having to worry about any tricky math-based pixel adjustments. This enables us to cleanly maintain our form structure and easily make any layout adjustments on the fly.
Another added benefit of using the Box-Sizing property is that you can add it to any block level HTML element. Not only will it help you with form builds, but with overall site layouts as well. This is especially handy when working with responsive websites, since the percentage-based widths allow for easily scalable elements.
Proper Syntax
input {-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
Browser Support
As with any modern CSS property, there are varying rendering issues for older browsers. If you still need to support those, you have to remember to use the old CSS methods as a fall back to achieve a fairly similar look.- Internet Explorer (version 8 and above): box-sizing
- Chrome (all versions): box-sizing
- Firefox (all versions, use vendor prefix): -moz-box-sizing
- Safari (all versions, use vendor prefix): -webkit-box-sizing
- Opera (version 8.5 and above): box-sizing
About the author: John Velasco
As a Senior Front End Developer for R2i, JV creates fully functional themes for various content management systems including DNN, Drupal and WordPress. He has a knack for both web design and development which allows him to quickly understand what can actually work on a website rather than just look cool. JV is also an enthusiastic volleyball player and thanks to his young and busy children he is always up to speed on the most current pop songs and dance moves.