multiple属性无法通过纯css美化滚动条或选项样式，因浏览器强制限制原生多选select的样式控制；可行方案是隐藏原生元素并用div/ul模拟。

直接说结论：multiple 属性本身无法通过纯 CSS 美化滚动条或选项样式，浏览器对 <select multiple></select> 的渲染限制极多，尤其是 <option></option> 的背景、边框、内边距等几乎不可控；真正可行的方案是「隐藏原生元素 + 用 div/ul 模拟」，而非硬刚默认行为。

为什么 appearance: none 对 multiple 失效？

appearance: none 在多数浏览器中只对单选 <select></select> 有效；一旦加上 multiple，WebKit（Chrome/Safari）和 Firefox 会强制恢复原生控件外观，-webkit-appearance 和 -moz-appearance 设置会被忽略。IE/Edge 甚至不支持该属性作用于多选场景。

常见错误现象：select[multiple] { appearance: none; } 写了但箭头还在、滚动条没变、选项文字无法居中——不是你写错了，是浏览器根本不认。

原因很简单：多选 select 被视为“操作系统级列表控件”，浏览器主动禁用样式干预以保障可访问性与平台一致性。

multiple 下拉区域的滚动条能自定义吗？

不能直接控制。原生 select[multiple] 的滚动容器不是标准 DOM 元素，::-webkit-scrollbar 伪类对其无效；Firefox 和 Safari 完全不暴露该滚动区域的样式接口。

Article To Html

文章转信息图。将文章/笔记转化为手机可读的 HTML 信息图，自动匹配视觉风格。触发场景：文章转图、笔记转图、信息图、转小红书图、做张图、可视化这篇文章、文生图。

下载

但有折中办法：

• 给 select[multiple] 设定固定 height 和 overflow: auto —— 实际无效，浏览器会忽略
• 包裹一层 <div class="select-wrapper">，设 <code>max-height 和 overflow-y: auto，再把 select 设为 display: block; width: 100% —— 仍无效，滚动行为由系统控件接管
• 唯一可靠路径：放弃原生 select[multiple]，改用 <div> + <code><label></label> + <input type="checkbox"> 或 <ul></ul> 列表模拟，手动绑定 change 事件同步值

  哪些样式在 multiple 上还能生效？

  有限但可用，重点用于「收口」和「占位」：

  • width、font-size、color、background（仅影响非选项区域，如边框内空白）可生效
  • border、border-radius 仅作用于外框，不影响内部选项区
  • padding 对整体有影响，但各浏览器解析不一致（Chrome 可能压进选项区，Firefox 忽略）
  • outline 和 box-shadow 可用于聚焦反馈，但需配合 :focus 手动管理

  注意：select[multiple] option 的任何样式（如 background-color、padding、line-height）全部被忽略，连 !important 都没用。

  推荐替代方案：轻量级自定义多选组件

  不用引入 Select2 或 Chosen 这类重型库，几行代码就能实现可控、可样式化、无障碍友好的多选：

  • 用 <div role="listbox" aria-multiselectable="true"> 包裹选项项 <li>每个选项用 <code><div role="option" aria-selected="false">，配合 <code>tabindex="0"
  • 用 aria-checked + data-value 同步选中状态，避免操作 DOM input 的副作用
  • 滚动容器设 max-height 和 overflow-y: auto，::-webkit-scrollbar 就完全可用
  • 保留原生 select[multiple] 作为 fallback（display: none），提交时读取其 selectedOptions 值或同步到隐藏字段

  真正麻烦的从来不是写样式，而是处理键盘导航（↑↓、Space、Enter）、焦点管理、屏幕阅读器播报逻辑——这些才是绕不开的复杂点。