自定义CSS样式的Select多选按钮在移动端失效问题求助

问题说明 #

给HTML的<select multiple>下拉框的选项设置按钮样式后，桌面端浏览器能正常显示为按钮样式的选项，但移动端浏览器仍显示为原生普通下拉框：

• 桌面端效果：选项以按钮形式横向排列，带有边框和圆角
• 移动端效果：显示为系统原生的多选下拉选择界面

原因 #

移动端浏览器会对原生<select multiple>控件强制使用系统原生UI组件，自定义CSS样式无法覆盖原生控件的渲染逻辑——这是浏览器为适配触摸交互和系统视觉风格的默认处理机制。

解决方案 #

放弃原生<select multiple>，用HTML+CSS+JS模拟一个多选按钮组，确保跨端样式一致，同时保留多选功能和表单提交的兼容性。

实现代码 #

HTML

<div class="custom-multi-select" id="custom_work_days">
  <label class="select-option">
    <input type="checkbox" name="work_days" value="1">
    <span>sun</span>
  </label>
  <label class="select-option">
    <input type="checkbox" name="work_days" value="2">
    <span>mon</span>
  </label>
  <label class="select-option">
    <input type="checkbox" name="work_days" value="3">
    <span>tue</span>
  </label>
  <label class="select-option">
    <input type="checkbox" name="work_days" value="4">
    <span>wed</span>
  </label>
  <label class="select-option">
    <input type="checkbox" name="work_days" value="5">
    <span>thu</span>
  </label>
  <label class="select-option">
    <input type="checkbox" name="work_days" value="6">
    <span>fri</span>
  </label>
  <label class="select-option">
    <input type="checkbox" name="work_days" value="7">
    <span>sat</span>
  </label>
</div>

CSS

.custom-multi-select {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
}

.select-option {
  position: relative;
}

.select-option input[type="checkbox"] {
  position: absolute;
  opacity: 0;
  cursor: pointer;
}

.select-option span {
  display: inline-block;
  width: 60px;
  font-size: 1.2em;
  padding: 10px 0;
  text-align: center;
  border: rgb(204, 204, 0) solid 1px;
  border-radius: 5px;
  color: rgb(204, 204, 0);
  cursor: pointer;
  transition: all 0.2s ease;
}

/* 选中状态样式 */
.select-option input[type="checkbox"]:checked + span {
  background-color: rgb(204, 204, 0);
  color: #fff;
}

/* 触摸反馈 */
.select-option span:active {
  transform: scale(0.98);
}

JS（可选，用于额外交互逻辑）

// 获取选中的值示例
const checkboxes = document.querySelectorAll('#custom_work_days input[type="checkbox"]');
checkboxes.forEach(checkbox => {
  checkbox.addEventListener('change', () => {
    const selectedValues = Array.from(checkboxes)
      .filter(cb => cb.checked)
      .map(cb => cb.value);
    console.log('选中的日期值:', selectedValues);
  });
});

说明 #

• 该方案在桌面端和移动端显示完全一致的按钮样式，支持触摸、点击操作
• 表单提交时，name="work_days"的复选框会和原生<select multiple>一样提交选中的多个值，后端无需修改接收逻辑

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