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

Question

在 CSS 中设置某些元素（即表单中的“选择”元素）的宽度（在本例中为 200 像素）时，我注意到一些有趣的事情。似乎选择元素总是有点太窄，所以我的表单中的输入并不统一。这是一个示例（屏幕截图来自 chrome，但这也发生在 IE 中）。

css是这样的：

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

和相关的小提琴

它并没有真正困扰我，但是我能做些什么来可靠地解决这个问题吗？

Answer 1

由于盒子大小不同，选择大小与输入大小不同。Input 将 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;
}