为什么select元素不像其他表单元素那么宽？

如果将select和text输入设置为相同宽度，则select元素的宽度总是比文本输入的宽度小几个像素。无论我是以像素还是百分比来设置宽度，都会发生这种情况。有谁知道为什么？有什么办法可以防止这种情况发生？为什么select元素不像其他表单元素那么宽？

最小演示：http://codepen.io/nosecreek/pen/wehKu

测试在Chrome和IE7

来源

2012-12-05 Dustin

用户代理样式，如填充，边框等 – Musa

取决于用户为控件设置的样式。有些用户有不同的用户代理设置，这些设置可以修改select元素上按钮的大小，文本框的边界等等。 –

据我所知，这不是因为用户代理样式，因为我已重置大部分在我的CSS中。这两个元素具有相同的字体，字体大小，行高，填充，边距和边框宽度，并进行渲染。然而，宽度稍微小一些，而选择上的高度实际上稍高一些。 – Dustin

我认为这是与所呈现箱尺寸。选择的可视部分小于定义宽度的框。包括这个在你的CSS中，它会显示正常。

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

http://codepen.io/joe/pen/taJnz

参考：Select inputs and text inputs in HTML - Best way to make equal width?

编辑：我想通了，为什么发生这种情况。我认为这是因为当你指定宽度时，你告诉它制作内部盒子的实际输入区域有多大。该文本框还带有作为标准的边框，边框的宽度为文本区域的宽度，每个边框为2像素。添加上面的CSS会改变宽度的计算方式。当我创建文本框1px的边框时，它只比选择的大2px。这似乎解释了它。

来源

2012-12-05 02:12:15 amustafa

感谢您提供其他问题的链接。我仍然不确定这是为什么发生这种情况，除了表单元素似乎比其他元素的风格更少。您的解决方案有效，但不够理想，因为盒子大小：边框与IE7不兼容。我担心有可能没有任何其他解决方案... – Dustin

你也可以作为另一种不太理想的解决方案，只是使输入项的宽度减小4像素。也许是因为当你指定在CSS中的宽度，你是告诉它有多大的内部框和边框是每个2px，这是文本区域宽度的附加大小。添加上面的CSS会改变宽度的计算方式？当我将文本框的边框设置为1px时，它只比选择的大2px。这似乎解释了它。我会在上面添加这个解释。 – amustafa

执行此操作的最可靠的方法是指定输入框的默认边框宽度，然后确保每个框的宽度占边框的宽度。 – amustafa

为什么select元素不像其他表单元素那么宽？

回答

相关问题