CSS改造select选项为按钮样式后移动端失效如何修复

效果参考（桌面端正常表现） #

• 原生<option>是由浏览器/操作系统接管渲染的特殊表单控件，不属于可自由定制的普通页面DOM元素：桌面端Chrome、Firefox等浏览器会直接在页面流内渲染多选select的选项，因此你写的CSS样式可以正常生效；但iOS、安卓端的移动浏览器触发选择时，会直接调用系统原生的选择弹窗/滚轮组件，根本不会在页面内渲染平铺的option元素，你写的所有布局相关样式（宽度、边距、display属性、圆角、阴影、内边距）都会被直接忽略。
• 移动端浏览器对原生表单控件有默认样式的高优先级保护，无论加多少!important声明，都无法覆盖系统控件的内置渲染规则，仅字体、文字颜色这类最基础的文本样式可能生效，盒模型、布局类样式完全不生效。
• 你代码里给select加的multiple多选属性，在移动端的渲染逻辑和桌面端差异更大：绝大多数移动端系统不会把多选选项直接平铺展示在页面上，必须点击唤起系统选择面板才能操作选项，完全达不到你要的按钮平铺交互效果。

不要直接修改原生select下option的样式，改用普通DOM元素模拟按钮式多选组，再把选中状态同步到隐藏的原生select上即可，这样可以保留你原有的表单取值、onchange业务逻辑，同时在桌面端、移动端的样式和交互完全一致。

完整实现代码 #

HTML结构 #

<!-- 隐藏原生select，保留原有属性和onchange逻辑 -->
<select
  class="property_for"
  id="property_for1"
  title="Looking For"
  onchange="get_select_option(this.value)"
  multiple
  hidden
>
  <option value="Buy" selected>Buy</option>
  <option value="Rent">Rent</option>
  <option value="wanted for sale">Wanted For Sale</option>
  <option value="wanted for rent">Wanted For Rent</option>
</select>

<!-- 自定义按钮组，全端样式可控 -->
<div class="custom-select-group">
  <div class="select-option-btn active" data-val="Buy">Buy</div>
  <div class="select-option-btn" data-val="Rent">Rent</div>
  <div class="select-option-btn" data-val="wanted for sale">Wanted For Sale</div>
  <div class="select-option-btn" data-val="wanted for rent">Wanted For Rent</div>
</div>

CSS样式 #

.custom-select-group {
  width: 100%;
  max-width: 300px;
  text-align: center;
  font-size: 0; /* 清除inline-block元素的默认间隙 */
}
.select-option-btn {
  width: 46%;
  height: 48px;
  line-height: 48px;
  font-size: 10px;
  margin: 3px;
  display: inline-block;
  cursor: pointer;
  border-radius: 5px;
  box-shadow: 0 0 4px #000000;
  font-family: "Poppins", sans-serif;
  vertical-align: middle;
  transition: all 0.2s ease;
}
.select-option-btn.active {
  background-color: #e91e63;
  color: #ffffff;
  box-shadow: 0 0 2px #e91e63;
}

JS交互逻辑（放在页面末尾即可） #

const selectEl = document.getElementById('property_for1');
const optionBtns = document.querySelectorAll('.select-option-btn');

// 绑定按钮点击切换逻辑
optionBtns.forEach(btn => {
  btn.addEventListener('click', () => {
    const currentVal = btn.dataset.val;
    const targetOption = selectEl.querySelector(`option[value="${currentVal}"]`);
    // 切换原生option的选中状态
    targetOption.selected = !targetOption.selected;
    // 切换按钮样式
    btn.classList.toggle('active');
    // 触发原生select的change事件，兼容原有业务逻辑
    selectEl.dispatchEvent(new Event('change'));
  })
})

// 原有取值函数不需要做任何修改
function get_select_option(value) {
  // 这里直接保留你原来的业务代码即可
  const selectedValues = Array.from(selectEl.selectedOptions).map(opt => opt.value);
  console.log('当前选中值：', selectedValues);
}

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