如何实现无需点击展示所有选项的select，解决multiple属性移动端显示异常

原生<select>标签添加multiple属性后，移动端浏览器/操作系统会使用自带的预设样式渲染，多数情况下会默认显示为点击弹出的选择器，不会直接展开所有选项，同时你现有的代码存在CSS单位缺失的问题，进一步加剧了显示异常。

方案1：自定义选项列表（兼容性最佳） #

直接用普通元素模拟选项列表，完全不受原生表单样式限制，可以100%匹配设计需求，是最推荐的实现方式：

<style>
.option-list {
  width: 100%;
  text-align: center;
}
.option-item {
  padding: 10px 0;
  font-size: 14px;
  background: transparent;
  border: none;
  width: 100%;
  cursor: pointer;
}
/* 选中状态可根据需求自定义调整 */
.option-item.selected {
  font-weight: bold;
  color: #1677ff;
}
</style>

<div class="option-list">
  <button class="option-item" data-value="id">Bahasa Indonesia</button>
  <button class="option-item" data-value="en">Inggris</button>
  <button class="option-item" data-value="viet">Vietnamese</button>
</div>

<script>
const options = document.querySelectorAll('.option-item')
options.forEach(item => {
  item.addEventListener('click', () => {
    // 单选逻辑，需要多选的话删除下一行，改成toggle类名即可
    options.forEach(opt => opt.classList.remove('selected'))
    item.classList.add('selected')
    // 选中后取值：item.dataset.value
  })
})
</script>

方案2：修复原生select配置（适合必须使用select标签的场景） #

通过补充属性和样式修复原生select的展示问题：

1. 给select添加size属性，值等于选项总数，强制展开所有选项
2. 补充缺失的CSS单位，清除移动端默认样式
3. 用padding代替option的margin，提升移动端兼容性

<style>
    select {
        background-color: transparent;
        border: none;
        margin: 0;
        width: 100%;
        font-family: inherit;
        font-size: 14px;
        cursor: inherit;
        line-height: inherit;
        outline: none;
        text-align: center;
        height: 90px;
        /* 清除移动端默认表单样式 */
        -webkit-appearance: none;
        appearance: none;
    }

    select option {
        padding: 10px 0;
        text-align: center;
    }
</style>
<div class="select m-auto">
  <!-- size值等于选项总数，不需要多选可以删除multiple属性 -->
  <select id="standard-select" name="bahasa" multiple size="3">
    <option value="id">Bahasa Indonesia</option>
    <option value="en">Inggris</option>
    <option value="viet">Vietnamese</option>
  </select>
</div>

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