Css 使用<；选择>；

虽然我对

和

使用相同的CSS，但是

中的文本会被截断，而输入中的文本是完美的。为什么会发生这种情况以及如何解决

输入，
挑选{
框大小：内容框；
宽度：90%；
高度：23px；
填充：10px；
字体系列：粗体字体；
字体大小：27px；
颜色：#f26e7c；
边框：4倍纯黑；
边界半径：12px；
}

xxxxxxxx

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

可以增加选择项的高度：

select{
   height: 40px;
}

---

首先去掉

高度：23px声明

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

要解决这个问题，只需将padding更改为
padding:6px 10px


输入，
挑选{
框大小：内容框；
宽度：90%；
填充：6px 10px；
字体系列：粗体字体；
字体大小：27px；
颜色：#f26e7c；
边框：4倍纯黑；
边界半径：12px；
}

xxxxxxxx
将select的行高度增加几个像素

这对我有用

更改为：

select {
    line-height: 15px;
}

致：

看起来选项本身有一个填充，但我还没有找到改变它的方法。在select上设置行高也不起作用。似乎还没有答案：@GolezTrol OP似乎是在用
select
元素讨论文本，而不是
选项
element将框大小设置为边框框并删除高度。使用IE，这不会发生，由于某些原因，其他浏览器在选项中添加了2px顶部填充。删除填充并不能解决此问题。删除填充+增加高度可以解决此问题。还有更多的文本吗？是的，我注意到，由于一些未知（但）原因，在选择元素上固定高度是罪魁祸首。为什么会发生这种情况将为OP问题提供一个答案。我很确定这是因为垂直填充占用了原本用于文本的空间。文本被剪切是因为您已将select的高度限制为23px.Hm-听起来不错，但为什么
input
元素没有这样做呢？我有一种感觉，这里正在发生更多的事情。选择元素在某些方面得到了特殊处理。看看这篇文章：
select {
    line-height: 17px !important;
}