html - CSS - 如何使 div 显示为较短的列表框？

Question

我有一个用于文本字段的自定义下拉框，当从 2000 年添加到 2020 年(或任何大列表)时，它的高度非常大。

如何使列表可滚动并显示 4 或 5 个列表项？而不是遵循完整列表:

  #combobox {
    display: none;
    z-index: 99999;    
    position: absolute;
    top:20%;
    left:30%;    

    background-color:white;color:black;border:solid 1px black;
    padding: 5px;
    cursor:pointer;
  } 

  #combobox div {
    padding: 10px;
    border-bottom: solid 1px #cccccc;
  }

  #combobox div:hover {
    background-color: #cccccc;
  }  

  <div id="combobox" style=""  >
    <div>2000</div><div>2001</div><div>2002</div><div>2003</div><div>2004</div><div>2005</div><div>2006</div><div>2007</div><div>2008</div><div>2009</div><div>2010</div><div>2011</div><div>2012</div><div>2013</div><div>2014</div><div>2015</div><div>2016</div><div>2017</div><div>2018</div><div>2019</div><div>2020</div>
  </div>

Answer 1

您可以将 overflow: scroll 添加到您的 div 并为其设置高度:

  #combobox {
   ...
   overflow: scroll;
   height: 100px;
  }

您可以调整高度以显示您需要的元素数。

提示

为了使滚动看起来更好，请尝试类似 perfectScroll 的东西