如何将select标签的下拉按钮改为<input type="number">的内置微调按钮？

select元素的原生下拉按钮与<input type="number">的微调按钮属于不同的浏览器原生控件，两者的伪元素支持逻辑完全独立，所以你之前尝试的select::-webkit-inner-spin-button样式不会生效。以下是两种可行的实现方案：

方案一：纯CSS视觉模拟（仅样式替换） #

通过隐藏原生下拉按钮，自定义模拟微调按钮的视觉效果：

HTML结构 #

<div class="custom-select-wrap">
  <select class="custom-select">
    <option value="1">选项1</option>
    <option value="2">选项2</option>
    <option value="3">选项3</option>
    <option value="4">选项4</option>
  </select>
  <div class="spin-controls">
    <button class="spin-up" type="button">▲</button>
    <button class="spin-down" type="button">▼</button>
  </div>
</div>

CSS样式 #

/* 隐藏select原生下拉按钮 */
.custom-select {
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  padding: 8px 32px 8px 10px;
  border: 1px solid #ddd;
  border-radius: 4px;
  background-color: #fff;
  cursor: pointer;
  font-size: 14px;
}

/* 容器用于定位自定义按钮 */
.custom-select-wrap {
  position: relative;
  width: 220px;
}

/* 微调按钮容器 */
.spin-controls {
  position: absolute;
  right: 6px;
  top: 50%;
  transform: translateY(-50%);
  display: flex;
  flex-direction: column;
  gap: 1px;
}

/* 自定义微调按钮样式 */
.spin-up, .spin-down {
  border: none;
  background-color: #f5f5f5;
  width: 16px;
  height: 12px;
  font-size: 9px;
  line-height: 1;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
}

.spin-up:hover, .spin-down:hover {
  background-color: #e8e8e8;
}

方案二：JS增强（实现交互功能） #

上面的纯CSS仅做视觉替换，点击按钮不会切换选项，添加JS可以实现和原生微调按钮一致的上下切换功能：

补充JS代码 #

const selectEl = document.querySelector('.custom-select');
const spinUpBtn = document.querySelector('.spin-up');
const spinDownBtn = document.querySelector('.spin-down');

// 向上切换选项
spinUpBtn.addEventListener('click', () => {
  const currentIdx = selectEl.selectedIndex;
  if (currentIdx > 0) {
    selectEl.selectedIndex = currentIdx - 1;
    // 手动触发change事件（如果需要监听选项变化）
    selectEl.dispatchEvent(new Event('change'));
  }
});

// 向下切换选项
spinDownBtn.addEventListener('click', () => {
  const currentIdx = selectEl.selectedIndex;
  if (currentIdx < selectEl.options.length - 1) {
    selectEl.selectedIndex = currentIdx + 1;
    selectEl.dispatchEvent(new Event('change'));
  }
});

额外说明 #

• 可以根据需求调整CSS的颜色、尺寸、圆角等属性，让自定义按钮更贴近你浏览器原生<input type="number">的样式。
• 如果需要兼容旧版浏览器，可以添加-moz-appearance: none等前缀处理Firefox的原生样式。

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