更改引导下拉菜单的大小

Question

我有一个简单的 html 选择框，里面有很多选项（大约 100 个）。 因为选择框的选项太多了，所以它使用完整的桌面高度来显示选项，但是我想添加一个滚动条并且同时只显示5个选项。

size 属性对我不起作用。

这是我的代码：

 <!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">

<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<!-- Latest compiled JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> 

<Select id="selectUser" onchange="" class="btn btn-default dropdown-toggle" style="margin-top: -3px; background-color: white; height: 30px;" >
<option>1</option>
<option>1</option>
<option>1</option>
<option>1</option>
<option>1</option>
<option>1</option>
<option>1</option>
<option>1</option>
<option>1</option>
<option>1</option>
<option>1</option>
<option>1</option>
<option>1</option>
<option>1</option>
<option>1</option>
<option>1</option>
<option>1</option>
<option>1</option>
<option>1</option>
<option>1</option>
<option>1</option>
<option>1</option>
<option>1</option>
<option>1</option>
</select>

Answer 1

据我所知您不能更改 height 的 select，因为它是浏览器定义

在这里查看为什么不能更改选项：https://css-tricks.com/dropdown-default-styling/

在此处查看浏览器中选项的大小：Height of an HTML select box (dropdown)

但是您可以将size 设置为select

select{
margin-top: -3px;
background-color: white;
height: 30px;
}

 <!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">

<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<!-- Latest compiled JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> 
<div class="row">
<div class="col-xs-2">
<select class="form-control" id="selectUser" onmousedown="if(this.options.length>5){this.size=5;}"  onchange='this.size=0;' onblur="this.size=0;">
<option>1</option>
<option>1</option>
<option>1</option>
<option>1</option>
<option>1</option>
<option>1</option>
<option>1</option>
<option>1</option>
<option>1</option>
<option>1</option>
<option>1</option>
<option>1</option>
<option>1</option>
<option>1</option>
<option>1</option>
<option>1</option>
<option>1</option>
<option>1</option>
<option>1</option>
<option>1</option>
<option>1</option>
<option>1</option>
<option>1</option>
<option>1</option>
</select>
</div>
</div>

Answer 2

你可以试试这个……

#selectUser { height: 100px; overflow: scroll; }