不能直接用 select 标签改样式，因浏览器原生控制强，::after/::before 多数不生效，appearance: none 仅隐藏箭头，下拉区、焦点、键盘导航及移动端兼容性仍难控；需用 input+ul+伪元素模拟：input（readonly/tabindex="0"）处理聚焦，ul 绝对定位作选项列表，input::after（需 position: relative+content: ""）绘自定义箭头，JS 控显隐；常见箭头不显因：input 缺 position: relative、content 误写单引号、input 为替换元素致伪元素失效（应外包 div）；键盘与无障碍必补：Space/Enter 展收、↑↓移动、Enter 确认，加 role="combobox"/"listbox"/"option" 及 aria-selected、aria-expanded，否则屏幕阅读器无法识别状态。
为什么不能直接用 select 标签改样式？
因为浏览器对 select 的原生渲染控制极强，::after、::before 在多数浏览器里无法触发（尤其 Chrome 和 Safari），appearance: none 虽能隐藏默认箭头，但下拉区域仍不可控，焦点、键盘导航、移动端兼容性都容易出问题。
用 input + ul + 伪元素模拟下拉结构
核心思路是：用 input 承担输入/聚焦行为，用 ul 模拟选项列表，靠 ::after 在 input 右侧画一个自定义箭头，并通过 JS 控制显隐。关键点：
-
input设为readonly或disabled（避免用户误输），用tabindex="0"保证可聚焦 -
ul绝对定位在input下方，z-index高于其他内容 -
input::after必须配合position: relative和content: ""才生效，箭头建议用border或background-image实现，别用字体图标（缩放/抗锯齿不稳） - 点击
input时，用 JS 切换ul的display或加showclass，同时监听document的click关闭它
input::after 箭头不显示？检查这三点
这是最常卡住的地方：
- 父级
input没设position: relative—— 伪元素定位会相对于最近的定位祖先，不是input自身 -
content值为空字符串写成content: ''而非content: ""（部分旧版 Safari 对单引号敏感） -
input是替换元素（replaced element），某些浏览器禁止对其使用伪元素 —— 解决方案：把input包进div，对这个div应用::after
键盘操作和可访问性不能丢
纯鼠标点击的下拉框对屏幕阅读器和键盘用户基本不可用。必须补全：
立即学习“前端免费学习笔记（深入）”；
- 按
Space或Enter展开/收起列表 - 展开后用
↑/↓键移动高亮项，Enter确认 - 给
input加role="combobox"，ul加role="listbox"，每个li加role="option"和aria-selected - 用
aria-expanded同步控制状态，否则 VoiceOver、NVDA 读不出当前是否打开
真正难的不是画个漂亮箭头，而是让整个交互链路在无鼠标、无触屏、仅靠键盘或语音时依然成立。很多“自定义下拉”在线上一测就崩，问题就出在这层逻辑没闭环。
