Question

我正在使用下拉菜单，单击菜单时调整滚动条很困难。我已经尝试过瞄准一切，但我似乎无法让它发挥作用。（我将宽度设置为20px，因此我可以轻松判断它是否已调整滚动条）。我正在使用Google Chrome。我确定这是一个我想念的简单修复。谢谢你的时间。

select::-webkit-scrollbar {
  width: 20px;
  background-color: #cccccc;
}

<div class="dropdown-container">
  <select class="dropdown">
    <option value="1">One</option>
    <option value="2">Two</option>
    <option value="3">Three</option>
    <option value="4">Four</option>
    <option value="5">Five</option>
    <option value="6">Six</option>
    <option value="7">Seven</option>
    <option value="8">Eight</option>
    <option value="9">Nine</option>
    <option value="10">Ten</option>
    <option value="11">Eleven</option>
    <option value="12">Twelve</option>
    <option value="13">Thirteen</option>
    <option value="14">Fourteen</option>
    <option value="15">Fifteen</option>
    <option value="16">Sixteen</option>
    <option value="17">Seventeen</option>
    <option value="18">Eighteen</option>
    <option value="19">Nineteen</option>
    <option value="20">Twenty</option>
  </select>
</div>

Answer 1

我会在select中添加一个大小，然后显示条形图并且你的css应该可以工作。您只需要选择默认情况下要显示的数量。

另请查看此页面以获取更多选项https://www.w3schools.com/howto/howto_css_custom_scrollbar.asp

<div class = "dropdown-container">
  <select class="dropdown" size="5">
    <option value="1">One</option>
    <option value="2">Two</option>
    <option value="3">Three</option>
    <option value="4">Four</option>
    <option value="5">Five</option>
    <option value="6">Six</option>
    <option value="7">Seven</option>
    <option value="8">Eight</option>
    <option value="9">Nine</option>
    <option value="10">Ten</option>
    <option value="11">Eleven</option>
    <option value="12">Twelve</option>
    <option value="13">Thirteen</option>
    <option value="14">Fourteen</option>
    <option value="15">Fifteen</option>
    <option value="16">Sixteen</option>
    <option value="17">Seventeen</option>
    <option value="18">Eighteen</option>
    <option value="19">Nineteen</option>
    <option value="20">Twenty</option>
  </select>
</div>

select::-webkit-scrollbar {
  width: 20px;
  background-color:#cccccc;
 }

如何使用CSS编辑下拉滚动条？

1 个答案: