自定义CSS下select元素滚动按钮不显示，如何实现显示？

原生<select>的下拉菜单是浏览器自带的原生控件，不属于常规DOM元素范畴，WebKit的滚动条伪元素对它的样式控制能力非常有限，没法强制显示滚动按钮。

要实现带滚动按钮的下拉菜单，只能用自定义组件替代原生<select>，把下拉选项放在普通的可滚动<div>里，这样就能完全应用你的滚动条样式。

实现代码示例 #

HTML 结构

<!-- 自定义下拉容器 -->
<div class="custom-select">
  <button class="select-trigger">选择选项</button>
  <div class="dropdown-menu">
    <div class="options-list">
      <div class="option">Why no scroll buttons?</div>
      <div class="option">Why no scroll buttons?</div>
      <div class="option">Why no scroll buttons?</div>
      <div class="option">Why no scroll buttons?</div>
      <div class="option">Why no scroll buttons?</div>
      <div class="option">Why no scroll buttons?</div>
      <div class="option">Why no scroll buttons?</div>
      <div class="option">Why no scroll buttons?</div>
      <div class="option">Why no scroll buttons?</div>
      <div class="option">Why no scroll buttons?</div>
      <div class="option">Why no scroll buttons?</div>
      <div class="option">Why no scroll buttons?</div>
      <div class="option">Why no scroll buttons?</div>
      <div class="option">Why no scroll buttons?</div>
      <div class="option">Why no scroll buttons?</div>
      <div class="option">Why no scroll buttons?</div>
      <div class="option">Why no scroll buttons?</div>
      <div class="option">Why no scroll buttons?</div>
      <div class="option">Why no scroll buttons?</div>
      <div class="option">Why no scroll buttons?</div>
      <div class="option">Why no scroll buttons?</div>
      <div class="option">Why no scroll buttons?</div>
      <div class="option">Why no scroll buttons?</div>
      <div class="option">Why no scroll buttons?</div>
      <div class="option">Why no scroll buttons?</div>
      <div class="option">Why no scroll buttons?</div>
      <div class="option">Why no scroll buttons?</div>
      <div class="option">Why no scroll buttons?</div>
      <div class="option">Why no scroll buttons?</div>
      <div class="option">Why no scroll buttons?</div>
      <div class="option">Why no scroll buttons?</div>
    </div>
  </div>
</div>

CSS 样式

/* 隐藏原生select（如果仍保留的话） */
select {
  display: none;
}

/* 自定义下拉基础样式 */
.custom-select {
  position: relative;
  width: 220px;
}

.select-trigger {
  width: 100%;
  padding: 8px 12px;
  border: 1px solid #ddd;
  border-radius: 4px;
  background: #fff;
  cursor: pointer;
  text-align: left;
}

.dropdown-menu {
  position: absolute;
  top: calc(100% + 2px);
  left: 0;
  right: 0;
  border: 1px solid #ddd;
  border-radius: 0 0 4px 4px;
  background: #fff;
  display: none;
  z-index: 1000;
}

.options-list {
  max-height: 200px;
  overflow-y: auto;
}

.option {
  padding: 8px 12px;
  cursor: pointer;
}

.option:hover {
  background-color: #f5f5f5;
}

/* 你的滚动条样式 */
::-webkit-scrollbar{
    width: 9px;
    height: 9px;
}

::-webkit-scrollbar-thumb {
    background-color:rgba(155, 155, 155, 0.5);
}

::-webkit-scrollbar-button:single-button {
  background-color: rgba(155, 155, 155, 0.5);
  display: block;
  background-size: 10px;
  background-repeat: no-repeat;
}

::-webkit-scrollbar-button:single-button:vertical:increment{
 border-radius:0px 0px 10px 10px;
}

::-webkit-scrollbar-button:single-button:vertical:decrement{
 border-radius:10px 10px 0px 0px;
}

::-webkit-scrollbar-button:single-button:horizontal:increment{
 border-radius:0px 10px 10px 0px;
}

::-webkit-scrollbar-button:single-button:horizontal:decrement{
 border-radius:10px 0px 0px 10px;
}

JavaScript 交互逻辑

const trigger = document.querySelector('.select-trigger');
const dropdown = document.querySelector('.dropdown-menu');
const options = document.querySelectorAll('.option');

// 切换下拉菜单显示/隐藏
trigger.addEventListener('click', () => {
  dropdown.style.display = dropdown.style.display === 'block' ? 'none' : 'block';
});

// 点击选项更新按钮文本并关闭下拉
options.forEach(option => {
  option.addEventListener('click', () => {
    trigger.textContent = option.textContent;
    dropdown.style.display = 'none';
  });
});

// 点击页面其他区域关闭下拉菜单
document.addEventListener('click', (e) => {
  if (!e.target.closest('.custom-select')) {
    dropdown.style.display = 'none';
  }
});

这样自定义的下拉菜单滚动区域会完全应用你设置的滚动条样式，包括顶部和底部的滚动按钮，效果和普通可滚动div一致。

内容的提问来源于stack exchange，提问作者Vincent