在CSS中设置select和input元素的相等宽度

Question

在CSS中设置某些元素的宽度(在这种情况下为200px)时,我注意到了一些有趣的东西,即表单中的"select"元素.似乎select元素总是有点太窄,因此我的表单中的输入不一致.这是一个例子(截图来自chrome,但这也发生在IE中).

css是这样的:

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

和相关的小提琴

它并没有那么多打扰我,但是我能做些什么才能可靠地解决这个问题？

Answer 1

由于不同的大小调整,选择大小调整与输入大小调整不同.输入将box-sizing设置为"content-box",而select的box-sizing设置为"border-box".
解决方案是指定这样的盒子模型:

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