html - 如何修复下拉菜单溢出？

Question

我有 3 个下拉菜单。第一个下拉菜单的选项很好，但最后一个下拉菜单的选项有点乱。

这是我的CSS

 select option {
        background: #E6EABF;
        color: #000000;
        overflow-y: scroll;
        z-index: 100;

 }

请最后一个是多选下拉列表。

感谢任何形式的帮助!

Answer 1

给选择一个 size 会起作用:size="8"

因为它不是硬编码使用js:

var select = document.getElementById('select');
select.size = select.length;

 
 select option {
        background: #E6EABF;
        color: #000000;
     
        }

 

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select id="select" multiple size="return this.length();">
  <option value="volvo">Volvo</option>
  <option value="saab">Saab</option>
  <option value="opel">Opel</option>
  <option value="audi">Audi</option>
    <option value="volvo">Volvo</option>
  <option value="saab">Saab</option>
  <option value="opel">Opel</option>
  <option value="audi">Audi</option>
    <option value="volvo">Volvo</option>
  <option value="saab">Saab</option>
  <option value="opel">Opel</option>
  <option value="audi">Audi</option>
    <option value="volvo">Volvo</option>
  <option value="saab">Saab</option>
  <option value="opel">Opel</option>
  <option value="audi">Audi</option>
    <option value="volvo">Volvo</option>
  <option value="saab">Saab</option>
  <option value="opel">Opel</option>
  <option value="audi">Audi</option>
</select>