原生无法用css有效美化，因appearance: none和伪元素对其无效；可行方案是dom替换（如checkbox模拟或第三方库）或仅调整height等基础样式，但需注意跨浏览器差异、滚动行为及无障碍支持。

multiple属性导致select默认样式无法直接用CSS覆盖

浏览器对 <select multiple></select> 的渲染是硬编码的，appearance: none 在大多数浏览器（尤其是 Safari 和旧版 Chrome）中对它无效，伪元素如 ::after 也无法叠加在多选下拉上。这不是你 CSS 写得不对，而是原生控件根本没暴露足够钩子。

真正能落地的美化方案只有两种路径

绕过原生 <select multiple></select>，用可完全控制的 DOM 替代：

• 用 <div> + <code><input type="checkbox"> 模拟多选项列表，配合 JS 管理选中状态和 value 同步
• 用第三方库（如 Select2、Choices.js、tom-select）——它们本质也是 DOM 替换，但封装了键盘导航、搜索、无障碍等细节

如果坚持用原生 <select multiple></select>，唯一能调的只有：height、padding、border、font，且各浏览器表现不一致（比如 Firefox 默认显示 4 行，Chrome 可能只显 2 行）。


Wechat HTML Publisher
直接上传HTML富文本到微信公众号草稿箱。支持完整的HTML格式,无需Markdown转换。
下载

用 CSS 强制 height 时要注意滚动行为

<select multiple></select> 的 height 值决定可见行数，但不是“容器高度”——它会自动添加垂直滚动条，且滚动条样式无法用标准 CSS 自定义（scrollbar-width 和 ::-webkit-scrollbar 对它支持极差）。常见踩坑点：

• 设 height: 200px 后，若选项少于可视行数，底部留白不可消除
• 移动端 Safari 完全忽略 height，强制全屏弹出原生选择器
• size 属性（如 size="5"）比 height 更可靠，但它按“行数”计算，不响应字体缩放

无障碍和表单提交别被美化带偏

无论用哪种替代方案，必须确保：

• 每个可选项有明确的 role="option" 和 aria-selected 状态
• <select multiple></select> 的 name/value 关系要同步到隐藏原生 <select></select> 或通过 FormData 手动构造
• 键盘操作（Space 选中、Arrow 键移动）不能丢——很多 DIY 实现只顾鼠标点击，一碰 Tab 就卡死

最常被忽略的是：美化后的组件一旦脱离原生 <select></select>，就不再自动参与表单序列化。漏掉 hidden input 或 submit 时手动收集值，后端根本收不到数据。