如何实现options水平并排对齐的select选择输入框？

原生<select>元素的下拉面板、内部<option>的渲染逻辑完全由浏览器接管，没有开放足够的CSS自定义权限，直接给<option>添加display: inline-block、float: left这类水平布局属性，在主流浏览器下都不会生效。要实现选项水平排列的效果，最稳妥的方案是用自定义DOM结构模拟select控件，兼容性和还原度都能达到预期。

效果参考 #

完整实现代码 #

HTML结构 #

用自定义容器模拟select整体，分为触发选值的展示区、放水平选项的下拉面板两部分，如果需要兼顾无障碍，可以在容器内加一个隐藏的原生<select>做值同步。

<div class="custom-select">
  <div class="select-trigger">请选择尺码</div>
  <div class="select-dropdown">
    <div class="option" data-value="xs">XS</div>
    <div class="option" data-value="s">S</div>
    <div class="option" data-value="m">M</div>
    <div class="option" data-value="l">L</div>
    <div class="option" data-value="xl">XL</div>
  </div>
</div>

CSS样式 #

核心布局逻辑是给下拉面板设置弹性布局，让内部选项自动水平排列，同时保留下拉的定位、选中态等交互样式：

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}
body {
  padding: 40px;
}
.custom-select {
  position: relative;
  width: 220px;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}
.select-trigger {
  padding: 9px 12px;
  border: 1px solid #dcdfe6;
  border-radius: 4px;
  cursor: pointer;
  background: #fff;
  font-size: 14px;
}
.select-dropdown {
  display: none;
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  padding: 12px;
  border: 1px solid #dcdfe6;
  border-radius: 4px;
  background: #fff;
  box-shadow: 0 2px 12px rgba(0,0,0,0.1);
  /* 核心：弹性布局实现选项水平并排 */
  gap: 8px;
}
/* 下拉展开状态 */
.custom-select.active .select-dropdown {
  display: flex;
}
.option {
  min-width: 42px;
  padding: 6px 0;
  border: 1px solid #e4e7ed;
  border-radius: 4px;
  text-align: center;
  cursor: pointer;
  font-size: 14px;
  transition: all 0.2s;
}
.option:hover,
.option.selected {
  border-color: #409eff;
  color: #409eff;
  background: #ecf5ff;
}

JS交互逻辑 #

实现下拉展开/收起、选项选中、点击外部关闭下拉的基础交互：

// 遍历初始化所有自定义select
document.querySelectorAll('.custom-select').forEach(selectEl => {
  const trigger = selectEl.querySelector('.select-trigger');
  const optionList = selectEl.querySelectorAll('.option');

  // 点击触发区切换下拉状态
  trigger.addEventListener('click', e => {
    e.stopPropagation();
    // 先关闭其他已展开的下拉
    document.querySelectorAll('.custom-select.active').forEach(el => {
      if(el !== selectEl) el.classList.remove('active');
    });
    selectEl.classList.toggle('active');
  });

  // 选项点击选值
  optionList.forEach(option => {
    option.addEventListener('click', () => {
      // 清除其他选项选中态
      optionList.forEach(opt => opt.classList.remove('selected'));
      // 标记当前选项为选中
      option.classList.add('selected');
      // 更新触发区显示文本
      trigger.textContent = option.textContent;
      // 收起下拉
      selectEl.classList.remove('active');
      // 可在此处获取选中值做后续业务逻辑
      // const selectedValue = option.dataset.value
    });
  });
});

// 点击页面任意空白处关闭所有展开的下拉
document.addEventListener('click', () => {
  document.querySelectorAll('.custom-select.active').forEach(el => {
    el.classList.remove('active');
  });
});

注意事项 #

• 不建议尝试修改原生<select>的option布局，Chrome、Firefox、Safari对原生表单控件的渲染逻辑差异极大，这类写法没有兼容性保障。
• 如果需要支持键盘操作、屏幕阅读器等无障碍能力，可以在自定义组件中补充对应键盘事件监听，同时同步值到隐藏的原生select上即可。

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