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

一尘不染

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

css

我正在填写表格。当我为<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>

阅读 251

2020-05-16

共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;
}

适用于IE8及更高版本。

2020-05-16