CSS，覆盖所有选择下拉列表的高度？

Question

我将如何引用，所以我可以覆盖所有选择框，以便我可以覆盖默认高度？当我使用类创建元素时，我很熟悉，但我不确定吗？

Answer 1

100％JS解决方案（使用jquery）

$("select").height("120px");

100％JS解决方案（没有jquery）

var selects = document.getElementsByTagName("select");
for(i = 0;i < selects.length; i++) {
    selects[i].style.height = "120px";
}

100％CSS解决方案

select {
    height: 100px !important;
}

Answer 2

您是指在删除原生select元素时弹出的菜单？

我认为你根本不能影响它，这完全取决于浏览器。

您可以影响的内容 - 它应该适用于所有当前浏览器 - 是select本身：

select { height: .... }

或每个选项（应该在Firefox中运行;否则提供支持）

select option { height: .... }

Answer 3

这应该可以解决问题：

select { height: 60px; }

将60替换为您想要的身高。

Answer 4

试试这个：

select {height:100px;}

Answer 5

最好的方法是在select元素上添加一个类。 <select name="nameforyourselect" class="myclass"></select>

然后在你的css上设置高度，例如.myclass{height:30px;}，这将为所有具有类名myclass的元素赋予高度30px。我建议你这样做，因为你可能希望用另一个高度创建另一个select元素。所以你只需在其上设置其他类并在你的CSS上定义它。

Answer 6

100％在我的场景中工作..

<select onfocus='this.size=10;' onblur='this.size=1;' 
        onchange='this.size=1; this.blur();'>

Answer 7

您可以使用CSS使用line-height和font-size轻松地做到这一点。

select {
    line-height: 1em;
    font-size: 14px;
}