如何让多选select的选项换行显示，避免被容器遮挡？

原生的<select multiple>控件是浏览器原生实现的表单元素，它的内部布局逻辑是固定的纵向列表，即使给option设置display: inline-block，也没法突破浏览器的渲染限制实现自动换行——这是原生控件的硬伤，纯CSS搞不定。

要实现选项方块自动换行的效果，只能放弃用原生option渲染，改用自定义的UI来模拟多选功能，同时保留原生select来处理表单提交（避免手动处理数据的麻烦）。具体实现如下：

1. HTML结构 #

保留原生的select multiple但隐藏它，同时添加一个自定义容器展示选项：

<!-- 隐藏的原生select，用于表单提交 -->
<select multiple class="column-select hidden" name="selected-columns">
  <option value="col1">列1</option>
  <option value="col2">列2</option>
  <option value="col3">列3</option>
  <option value="col4">列4</option>
  <option value="col5">列5</option>
  <option value="col6">列6</option>
  <option value="col7">列7</option>
</select>

<!-- 自定义的选项容器 -->
<div class="custom-select-container"></div>

2. CSS样式 #

给自定义容器和选项设置样式，实现自动换行的方块效果：

/* 隐藏原生select */
.column-select.hidden {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

/* 自定义容器，实现自动换行 */
.custom-select-container {
  width: 100%;
  padding: 5px;
  border: 1px solid #ccc;
  border-radius: 4px;
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
}

/* 自定义选项样式 */
.custom-option {
  padding: 5px 10px;
  border-radius: 5px;
  background: #2b3035;
  color: #fff;
  cursor: pointer;
  user-select: none;
}

/* 选中状态的选项样式 */
.custom-option.selected {
  background: #1a73e8;
}

3. JavaScript逻辑 #

同步自定义选项和原生select的选中状态：

const nativeSelect = document.querySelector('.column-select.hidden');
const customContainer = document.querySelector('.custom-select-container');

// 初始化自定义选项
Array.from(nativeSelect.options).forEach(option => {
  const customOption = document.createElement('span');
  customOption.className = 'custom-option';
  customOption.textContent = option.textContent;
  customOption.dataset.value = option.value;
  
  // 设置初始选中状态
  if (option.selected) {
    customOption.classList.add('selected');
  }
  
  // 点击切换选中状态
  customOption.addEventListener('click', () => {
    customOption.classList.toggle('selected');
    option.selected = !option.selected;
  });
  
  customContainer.appendChild(customOption);
});

这种方案既能让选项自动换行，又能保留原生表单提交的逻辑，不用额外处理数据提交的问题，而且样式完全可控，不受浏览器原生控件的限制。

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