更改引导程序下拉菜单的大小

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的{​​{1}} ，因为它是浏览器定义

请参见此处为何无法更改选项：https://css-tricks.com/dropdown-default-styling/

请参见此处浏览器中选项的大小：Height of an HTML select box (dropdown)

但是您可以将select设置为size

select

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

Answer 2

您可以尝试...

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