原生 <select multiple> 无法真正美化，因浏览器对其样式控制极弱，appearance: none 失效、伪元素不生效、option 状态难干预；根本原因是多选时浏览器渲染为滚动列表框且各平台差异大；可行方案是用 tom-select 等 JS 插件替换 DOM 实现可控 UI。
原生 <select multiple> 几乎无法真正美化 —— 浏览器对多选下拉框的样式控制极弱，appearance: none 在多数浏览器中失效，伪元素（如 ::after）不生效，option 的 hover / selected 状态也难以统一干预。
为什么直接 CSS 美化 <select multiple> 会失败
根本原因在于：多选模式下，浏览器不再渲染传统下拉菜单，而是显示为一个可滚动的列表框（类似 <textarea>），且各浏览器行为差异极大：
- Chrome / Edge：支持有限的
border、padding、font，但background易被系统主题覆盖，appearance完全无效 - Firefox：允许部分
option样式（如color），但无法控制选中背景色或滚动条以外的视觉细节 - Safari：几乎完全锁定样式，连
height都可能被忽略 - 移动端：多数直接调用系统原生多选控件，CSS 基本无作用
可行方案：用 JS 插件替换 DOM 结构
真正可控的方式是放弃原生 <select multiple>，改用插件生成自定义 UI。主流选择有：
-
bootstrap-select：需引入 Bootstrap + jQuery，启用multiple+data-live-search="true"即可，选项支持分组、搜索、全选按钮 -
Chosen：轻量级，兼容老项目，但已停止维护，IE8+ 可用，不支持原生required校验 -
tom-select（推荐）：现代、无依赖、支持 TypeScript，API 清晰，plugins: ['remove_button', 'dropdown_input']可开箱即用
示例（tom-select）：
立即学习“前端免费学习笔记（深入）”；
<select id="my-multi" multiple>
<option value="1">苹果</option>
<option value="2">香蕉</option>
<option value="3">橙子</option>
</select>
<script>
new TomSelect("#my-multi", {
plugins: ["remove_button"],
maxItems: 3,
render: {
item: function(data, escape) {
return `<div class="ts-item">${escape(data.text)}</div>`;
}
}
});
</script>
若必须保留原生 <select multiple>，能调的仅剩这些
不是“美化”，而是“最小限度统一”：
- 强制固定高度和滚动行为：
height: 120px; overflow-y: auto;，避免不同浏览器默认行高不一致 - 统一字体与颜色：
font-family: -apple-system, system-ui, sans-serif;+color: #333; - 微调
option内边距（仅 Firefox 有效）：option { padding: 6px 12px; } - 隐藏丑陋的滚动条（仅 WebKit）：
&::-webkit-scrollbar { width: 6px; }+&::-webkit-scrollbar-thumb { background: #ccc; border-radius: 3px; } - 禁用用户缩放干扰：
select[multiple] { -webkit-text-size-adjust: 100%; }
容易踩的坑
几个高频翻车点：
- 给
<select multiple>加appearance: none→ 在 Chrome/Firefox 中完全无效，别白费力气 - 用
select::after画箭头 → 多选模式下该伪元素根本不渲染 - 以为
option:checked能设背景色 → Safari 和部分移动端完全无视 - 在表单提交前用 JS 读取
select.selectedOptions→ 注意它返回的是HTMLOptionElement[]，不是值数组，得手动映射.map(o => o.value)
真正的多选下拉美化，本质是 UI 替换，不是样式修补。花两小时配好 tom-select，比三天折腾原生 CSS 更省心、更可靠。
