Since the result of using the box-sizing: border-box; is so much better, many developers want all elements on their pages to work this way. The code below ensures that all elements are sized in this more intuitive way:
Many browsers already use box-sizing: border-box; for many form elements (but not all - which is why inputs and textareas look different at width: 100%;):
| HTML file: | Displayed by browser: |
|---|---|
|
<style>
/* box-sizing is applied only to second form! */ * { box-sizing: border-box; } input, textarea { width: 100%; } </style> <body> <h3>Without box-sizing:</h3> <form action="action_page.php"> First name:<br /> <input type="text" name="firstname" value="Mickey"><br /> <br /> Last name:<br /> <input type="text" name="lastname" value="Mouse"><br /> <br /> Comments:<br /> <textarea name="message" rows="5" cols="30"> </textarea> <br /><br /> <input type="submit" value="Submit"> </form> <hr /> <h3>With box-sizing:</h3> <form action="action_page.php"> First name:<br /> <input class="boxsize" type="text" name="firstname" value="Mickey"><br /> <br /> Last name:<br /> <input class="boxsize" type="text" name="lastname" value="Mouse"><br /> <br /> Comments:<br /> <textarea class="boxsize" name="message" rows="5" cols="30"> </textarea> <br /><br /> <input class="boxsize" type="submit" value="Submit"> </form> </body> |
Without box-sizing:With box-sizing: |
Note: Without the box-sizing property in the style element, the elements in the form (input, textarea, and submit button) all have varied widths.
