使用<select>时文本会被删除

Question

虽然我用两个相同的CSS <input>和<select>中,文本<select>被切断,而在输入文本是完美的.为什么会发生这种情况以及如何解决？

input,
select {
  box-sizing: content-box;
  width: 90%;
  height: 23px;
  padding: 10px;
  font-family: TheBoldFont;
  font-size: 27px;
  color: #f26e7c;
  border: 4px solid black;
  border-radius: 12px;
}

<input type="text" value="xxxxxxx">

<select>
  <option selected value="xxxxxxxxx">xxxxxxxx</option>
</select>

这是结果:

这就是在Google Chrome的开发者工具中悬停显示的内容:

Answer 1

首先删除height: 23px;声明.

请注意,文本不再被剪切,但元素的高度大于所需的高度.

要解决此问题,只需将填充变为 padding: 6px 10px;

小提琴

input,
select {
  box-sizing: content-box;
  width: 90%;
  padding: 6px 10px;
  font-family: TheBoldFont;
  font-size: 27px;
  color: #f26e7c;
  border: 4px solid black;
  border-radius: 12px;
}

<input type="text" value="xxxxxxx">

<select>
  <option selected value="xxxxxxxxx">xxxxxxxx</option>
</select>

Answer 2

将选择的行高增加几个像素。

这对我有用。

改变了这一点：

select {
    line-height: 15px;
}

到：

select {
    line-height: 17px !important;
}