Set equal width of select and input elements in CSS [duplicate]

Question

I have noticed something funny when setting widths (200px each in this case) of certain elements in CSS, namely the 'select' element in a form. It seems that the select element is always a bit too narrow and so the inputs in my forms aren't uniform. Here is an example (the screenshot is from chrome, but this happens in IE as well).

The css is like so:

input { width: 200px; }
select {width: 200px; }

And the associated Fiddle

It doesn't really bother me that much, but is there anything I can do to reliably solve this problem?

Answer 1

Select sizing differs from inputs sizing because of different box-sizing. Input has box-sizing set to "content-box" while select has box-sizing set to 'border-box'.
The solution is to specify box model like this:

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