表单中输入和选择标签高度的问题答案

【问题标题】：Issue with Input & Select tag height in form表单中输入和选择标签高度的问题
【发布时间】：2022-02-14 19:13:18
【问题描述】：

我正在制作一个表格。当我给<input> 和<select> 标签赋予相同的高度和宽度时，<select> 标签的高度与<input> 的高度不同。

似乎有一个像素的高度差。
有什么问题？

input {
  width: 100px;
  height: 20px;
  vertical-align: top;
}

select {
  border: 1px solid #ccc;
  vertical-align: top;
}

option {
  color: red;
  width: 100px;
  height: 20px;
  text-decoration: underline;
}

<input type="text">
<select>
  <option>first option</option>
  <option>second option</option>
</select>

View on JSFiddle

【问题讨论】：

Select inputs and text inputs in HTML - Best way to make equal width?的可能重复
在小提琴中，由于选择和输入框中的字体大小不同，差异为 3 个像素。但是，当您将它们设置为相等时，1 px 的差异仍然存在。

标签： css

【解决方案1】：

您必须为您的 select 指定高度并为此还指定 box-sizing 属性。

select {
    border:1px solid #ccc;
    vertical-align:top;
    height:20px;
}
input, select{
  box-sizing: border-box;
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
}

查看http://jsfiddle.net/RCnQa/16/

适用于 IE8 及更高版本。

【讨论】：

应该也设置margin: 0，默认边距不同。 jsfiddle.net/RCnQa/18
最好能定义重置 CSS
我推荐min-height而不是高度

【解决方案2】：

尝试使用box-sizing：

input, select, option {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;  
}
input, select {
    width:100px;
    height:20px;
    border : 1px #ccc solid;
    vertical-align:top;
}

小提琴示例：http://jsfiddle.net/RCnQa/17/

【讨论】：

【解决方案3】：

它们在视觉上永远不会相等，您可以使用以下内容更新选择 css：

select {
    border:1px solid #cccccc;
    vertical-align:top;
    height:23px;
}

【讨论】：

我推荐min-height而不是高度

【解决方案4】：

如果您使用引导程序，只需在选择中使用表单控制类。

<select class="form-control">

【讨论】：

这是最快的方法！

【解决方案5】：

即使在 2017 年 11 月 21 日最新的 Chrome 上，似乎仍然需要在选择上设置固定高度。

我更喜欢设置min-height，因为它对我来说感觉更好，而且还有各种各样的插件会弄乱你可能不考虑的字体大小。这样可以避免裁剪更安全一些。

 padding: .25rem .5rem;
 min-height: 2.5rem;
 font-size: 1.1em;

注意：可以减少垂直填充，因为我们现在强制设置高度。

如果您希望在字体大小更改时更改高度，请使用 em 表示 padding 和 min-height。

【讨论】：

【解决方案6】：

在 2022 年，我们有 display:flex 解决方案：

form.flex {
  display: flex;
  gap: 0.3rem;
}

<form class="flex">
  <input type="search">
  <select class="queryselect">
    <option value="1">One</option>
    <option value="2">Two</option>
  </select>
  <input type="submit" value="Go!">
</form>

【讨论】：

【解决方案7】：

我的一个项目中的选择框遇到了同样的问题。我通过更改此处所述的选择框的箭头来修复它，

http://bavotasan.com/2011/style-select-box-using-only-css/

我希望这会有所帮助.....

【讨论】：

这不是问题的直接答案。问题很明确：如何放置大小相等的select？而不是如何更改选择的箭头

【解决方案8】：

使用填充而不是高度可以得到更好的最终结果：

input {
    width:100px;
    vertical-align:top;
    padding:2px; //or whatever you want
}

select {
    border:1px solid #ccc;
    vertical-align:top;
    padding:2px; //same as above
}

【讨论】：

【解决方案9】：

只需在您的select 标签style 中设置box-sizing: content-box;。

【讨论】：

【解决方案10】：

select{ 
  height: 50px; 
  border-radius: 4px;
}

<select>
  <option value="0">Man</option>
  <option value="1">Woman</option>
</select>

【讨论】：