使用<select>

Question

虽然我对两个＆lt; input＆gt;使用相同的CSS和＆lt; select＆gt;，＆lt; select＆gt;中的文字被切断，而输入中的文字是完美的。为什么会发生这种情况以及如何解决？ 输入， 选择 {   box-sizing：content-box;   宽度：90％;   身高：23px;   填充：10px;   font-family：TheBoldFont;   font-size：27px;   颜色：＃f26e7c;   边框：4px纯黑色;   border-radius：12px; } ＆lt; input type =“text”value =“xxxxxxx”＆gt; ＆LT;选择＆GT;   ＆lt; option selected value =“xxxxxxxxx”＆gt; xxxxxxxx＆lt; / option＆gt; ＆LT; /选择＆GT; 这是结果： 这就是在Google Chrome的开发人员工具中悬停显示的内容：

Answer 1

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

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

要解决此问题，只需将填充标记为padding: 6px 10px;

即可

FIDDLE

＆＃13;

＆＃13;

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

＆＃13;

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

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

＆＃13;

＆＃13;

＆＃13;

Answer 2

这是因为填充。考虑只使用左右填充，结合最小高度。

Answer 3

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

这对我有用。

改变了这个：

select {
    line-height: 15px;
}

要：

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

Answer 4

您可以增加选择项目的高度：

select{
   height: 40px;
}