Select inputs and text inputs in HTML - Best way to make equal width?

Question

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...

Answer 1

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.