移动端Chrome禁用multiple select无法显示选中项问题求助

针对你遇到的移动端Chrome中禁用的multiple select仅显示选中数量、无法查看具体选项的问题，提供以下几种可行方案：

方案1：视觉模拟禁用状态，保留展开查看功能 #

去掉select的disabled属性，通过CSS模拟禁用样式并阻止用户修改操作，同时保留移动端展开查看选项的能力：

<select multiple size="3" style="pointer-events: none; opacity: 0.7; border: 1px solid #ccc; background-color: #f5f5f5;">
  <option selected>opt1</option>
  <option selected>opt2</option>
  <option>opt3</option>
</select>

• size="3"强制显示所有选项，避免移动端默认的下拉折叠
• pointer-events: none阻止用户点击修改选中状态
• opacity和背景色模拟原生禁用组件的视觉效果

方案2：自定义展示选中项，隐藏原生Select #

如果不需要保留原生select的样式，直接用自定义元素展示选中项，同时隐藏原生select用于表单提交：

<!-- 自定义展示区域 -->
<div style="padding: 0.5rem; border: 1px solid #ccc; border-radius: 4px; background-color: #eee;">
  已选：opt1, opt2
</div>
<!-- 隐藏的原生select，负责提交数据 -->
<select multiple hidden name="selected-options">
  <option selected>opt1</option>
  <option selected>opt2</option>
  <option>opt3</option>
</select>

这种方式完全避免了移动端浏览器对select的特殊处理，展示效果可控性最强。

方案3：强制移动端使用非下拉样式 #

通过CSS禁用移动端select的默认下拉外观，强制显示所有选项：

<select multiple disabled size="3" style="-webkit-appearance: none; appearance: none;">
  <option selected>opt1</option>
  <option selected>opt2</option>
  <option>opt3</option>
</select>

部分移动端浏览器可能会忽略disabled对size属性的影响，添加appearance: none可以强制渲染为列表样式，从而直接显示选中项。

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