如何调整高度<select>CSS 或 Javascript 中的元素？

Question

我有一个位于框内的下拉菜单。 我希望下拉菜单填满整个框。 宽度填满了整个框，但我似乎找不到更改下拉菜单高度的方法。

我试过使用高度并弄乱填充，但我在任何地方都找不到答案。

 <div class="custom_select" id="main_dropdown_menu"> <select class="dropdown_list" name="list of majors" id="main_dropdown"> <option value="default" selected="selected" id="submenu">---</option> <option value="arts">Arts</option> <option value="business">Business</option> <option value="engineering">Engineering</option> <option value="health">Health</option> <option value="humanities">Humanities</option> <option value="natural sciences">Natural Sciences</option> <option value="social sciences">Social Sciences</option> </select> </div>

Answer 1

您可以在 CSS 中设置选择框的高度：

 select.dropdown_list { height: 30px; }

 <div class="custom_select" id="main_dropdown_menu"> <select class="dropdown_list" name="list of majors" id="main_dropdown"> <option value="default" selected="selected" id="submenu">---</option> <option value="arts">Arts</option> <option value="business">Business</option> <option value="engineering">Engineering</option> <option value="health">Health</option> <option value="humanities">Humanities</option> <option value="natural sciences">Natural Sciences</option> <option value="social sciences">Social Sciences</option> </select> </div>

Answer 2

也许这是你需要的：

 #main_dropdown_menu{ height: 200px; background: grey; } #main_dropdown{ height: 100%; }

 <div class="custom_select" id="main_dropdown_menu"> <select class="dropdown_list" name="list of majors" id="main_dropdown"> <option value="default" selected="selected" id="submenu">---</option> <option value="arts">Arts</option> <option value="business">Business</option> <option value="engineering">Engineering</option> <option value="health">Health</option> <option value="humanities">Humanities</option> <option value="natural sciences">Natural Sciences</option> <option value="social sciences">Social Sciences</option> </select> </div>

Answer 3

这个 CSS 可以解决问题，根据您的要求进行调整。

select {
   height: calc(1.5em + .75rem + 2px);
   padding: .375rem 1.75rem .375rem .75rem;
   font-size: 1rem;
   font-weight: 400;
   line-height: 1.5;
   vertical-align: middle;
   -webkit-appearance: none;
   -moz-appearance: none;
   appearance: none;
}

Answer 4

 <select style="position: absolute;" onmousedown="if(this.options.length>8){this.size=8;}"  onchange='this.size=0;' onblur="this.size=0;" class="dropdown_list" name="list of majors" id="main_dropdown">

这对我来说很好用，您可以根据您希望它出现的位置调整位置。 通过将位置声明为绝对位置，它会将列表向下显示，如果您不声明它，那么它将显示在移动所有其他代码的顶部。