原生 <select multiple> 几乎无法自定义样式，因浏览器限制导致 appearance: none 失效、滚动条和复选框图标不可控，iOS Safari 甚至降级为单选；推荐改用 <input type="checkbox"> 组合实现完全可控的多选 UI。
为什么原生 <select multiple> 几乎不能改样式
因为浏览器对 <select multiple> 的 CSS 控制力极弱。哪怕加了 appearance: none，在多数浏览器（尤其是 Windows Chrome、Firefox）里依然无效；滚动条、选项高亮、复选框图标这些都不可控。iOS Safari 更是直接忽略 multiple，弹出单选原生 Picker。这不是你代码写错了，是平台限制。
所以“自定义样式”这件事，对原生多选下拉来说，基本等于放弃。真要样式统一、交互可控，得换方案。
<input type="checkbox"> 组合实现多选的样式控制要点
这才是真正可定制的多选方案。用一组 <input type="checkbox"> + <label> 模拟选项，所有样式、状态、动画全由你掌控。
- 必须给每个
input设置相同name（如name="category"），否则表单提交时不会聚合成数组 - 推荐用
for属性绑定label和input，提升点击区域和可访问性：<input id="cat-1" type="checkbox" name="category" value="tech"><label for="cat-1">技术</label> - 隐藏原生 checkbox：用
input[type="checkbox"] { appearance: none; }，再用::before或::after画自定义勾选框 - 利用
:checked伪类控制选中态样式，比如背景色、边框、图标替换
一个最小可用的自定义多选按钮组 CSS 示例
下面这段 CSS 能让 checkbox 组看起来像带圆角、悬停反馈的现代按钮：
立即学习“前端免费学习笔记（深入）”；
input[type="checkbox"] {
display: none;
}
input[type="checkbox"] + label {
display: inline-block;
padding: 8px 16px;
margin: 4px;
background: #f5f5f5;
border: 1px solid #ddd;
border-radius: 4px;
cursor: pointer;
transition: all 0.2s;
}
input[type="checkbox"]:checked + label {
background: #007bff;
color: white;
border-color: #007bff;
}
input[type="checkbox"]:hover:not(:checked) + label {
background: #e9ecef;
}
input[type="checkbox"]:focus + label {
outline: 2px solid #007bff;
outline-offset: 2px;
}
注意：input 必须紧挨着 label，且 label 用 for 或包裹方式关联，否则 :checked + label 选择器不生效。
移动端适配和可访问性容易被忽略的点
桌面端调好样式后，一上手机就出问题——常见原因不是代码错，而是没考虑触控与语义。
- 触控区域太小：至少保证
label高度 ≥ 44px，不然 iOS 上点不中 - 缺少键盘支持：用户按 Tab 键聚焦到 checkbox 后，空格键应能切换状态；当前示例依赖
:focus样式，但没处理键盘逻辑，需 JS 补充或确保原生行为可用 - 屏幕阅读器识别：别只靠视觉样式表达“已选”，要保留
aria-checked="true"或让input保持可读状态（隐藏但不display: none，改用clip-path或position: absolute; left: -9999px） - 不要用
pointer-events: none挡掉 checkbox，会破坏所有交互
真正难的不是画个好看的勾，而是让所有人——无论用鼠标、手指还是键盘——都能一致、可靠地操作它。
