如何为HTML文本输入和下拉输入设置相同的宽度 [英] How to set the same width for HTML text input and drop down input

问题描述

我有这样的两个HTML元素：

 < input type =text> 
  

和

 <选择> 
< option> Apple< / option> 
< option>橙色< /选项> 
< option> Banana< / option> 
< option>葡萄< / option> 
< / select> 
  

我完全不能使它们的宽度相同。无论我指定宽度为100％还是200px或其他任何宽度，下拉总是比文本框短5px。这发生在IE浏览器，Firefox和Chrome浏览器 - 在WINDOWS。

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

$ b

 输入，请选择
 {
 -ms-箱尺寸：边界盒; 
 -moz-box-sizing：border-box; 
 box-sizing：border-box; 
 -webkit-box-sizing：border-box; 
 
  

解决方案

看看这个工作示例

您可以修改CSS以保持它：

 输入，请选择
 {
 width：250px; 
} 
  

I have the two HTML elements like so:

<input type="text">

and

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

I am not at all able to make them the same width. No matter what width I specify for BOTH the elements, 100% or 200px or whatever, the drop down always seems to be about 5px shorter than the text box. This happens in IE, Firefox and Chrome - in WINDOWS.

How can I set them to have the same width?

Solution

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

解决方案

Take a look at this working Example

You can modify the CSS just to keep it like:

input, select
 {
    width:250px;        
 }

这篇关于如何为HTML文本输入和下拉输入设置相同的宽度的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！