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 box (in Firefox anyway) isn't always the same width as my input boxes. It generally has a few pixels shorter width.

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 box's width individually, or putting them into tables...

Thanks!

Answer 1

padding will make the text be closer to the edge of the box.

try setting the margin to 0px, and if that seems right, play around with it (like just setting margin-left only)

Answer 2

The solution is to specify box model for form elements, and browsers tend to agree most when you use border-box:

input, select, textarea {
  box-sizing: border-box;
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
}

Answer 3

Had same problems with 100% width table and cells, with a textbox (also with width at 100%) wider than the table cell.

This solved my problem in the css:

table td
{
    padding-right: 8px;
}

Not the best solution ever, cause you probably get some additional space to the right side. But at least it's not hiding anymore!