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

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
– sscirrus, Commented Nov 12, 2013 at 21:58
This is not for particular issue, but generally css reset is good way to reduce browser incompatibility: necolas.github.io/normalize.css — Artem
– Artem, Commented Nov 12, 2013 at 22:02

Alessandro Minoccheri · Accepted Answer · 2013-11-12 21:59:23Z

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, 2013 at 21:59

Alessandro Minoccheri

36.1k22 gold badges128 silver badges176 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

A.R. Over a year ago

For the record, I also got this to work without "-moz-box" and "-webkit-box".

Collectives™ on Stack Overflow

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

1 Answer 1

1 Comment

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Linked

Related