Set equal width of select and input elements in CSS

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

enter image description here

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?

FYI - the different browsers are notoriously inconsistent on form elements like `select`. If you get it right on one, it'll still look a bit off to many users. — sscirrus, Nov 12 '13 at 21:58
This is not for particular issue, but generally css reset is good way to reduce browser incompatibility: http://necolas.github.io/normalize.css/ — Artem, Nov 12 '13 at 22:02

score 7 · Accepted Answer · answered Nov 12 '13 at 21:59

7

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;
}

answered Nov 12 '13 at 21:59

Alessandro Minoccheri

35,521
22
122
171

For the record, I also got this to work without "-moz-box" and "-webkit-box". – A.R. Nov 13 '13 at 13:36

Set equal width of select and input elements in CSS

1 Answers1