如何为HTML文本输入和下拉输入设置相同的宽度

Question

我有两个HTML元素，如下所示：

<input type="text">

和

<select>
  <option>Apple</option>
  <option>Orange</option>
  <option>Banana</option>
  <option>Grapes</option>
</select>

我完全无法使它们具有相同的宽度。无论我指定的宽度是100％还是200px等等，下拉总是比文本框短约5px。这种情况发生在IE，Firefox和Chrome中 - 在WINDOWS中。

如何将它们设置为具有相同的宽度？

解决方案

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

Answer 1

查看this working Example

您可以修改CSS只是为了保持它：

input, select
 {
    width:250px;        
 }

Answer 2

为什么不这样做？

input[type="text"] {
   width: 200px;
}

select {
   width: 205px;
}