I've got a simple form like so (illustrative purposes only)...
<form>
<div class="input-row">
<label>Name</label>
<input type="text" name="name" />
</div>
<div class="input-row">
<label>Country</label>
<select name="country">
<option>Australia</option>
<option>USA</option>
</select>
</div>
</form>
My layout method using CSS is as follows...
form {
width: 500px;
}
form .input-row {
display: block;
width: 100%;
height: auto;
clear: both;
overflow: hidden; /* stretch to contain floated children */
margin-bottom: 10px;
}
form .input-row label {
display: block;
float: left;
}
form .input-row input,
form .input-row select {
display: block;
width: 50%;
float: right;
padding: 2px;
}
This all aligns quite nicely, except my select
element (in Firefox anyway) isn't always the same width as my other input
elements. It generally is narrower by a few pixels.
I've tried changing the width to a pixel size (e.g. 200px
) but it has not made a difference.
What is the best way to get these to all have the same width? I hope it doesn't resort to me setting the select
's width
individually, or putting them into tables...
The solution is to specify box model for form elements, and browsers tend to agree most when you use border-box:
input, select, textarea {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
There's normalize.css project that aggregates such tricks.