appearance: none 本身不能单独生效，必须配合-webkit-appearance: none、-moz-appearance: none等前缀，并重置border、background、padding及box-sizing等盒模型样式，否则在Chrome、Safari（15.4前）、Firefox（85前）中完全无效。
appearance: none 本身不能单独生效，必须配合浏览器前缀且重置盒模型样式，否则在 Chrome、Safari（15.4 之前）、Firefox（85 之前）等环境中完全无效。
为什么 appearance: none 常常没反应
直接写 appearance: none 几乎总失效，原因很实在：
- Chrome 和 Safari 依赖
-webkit-appearance: none，缺它就当没写 - Firefox 85 之前只认
-moz-appearance: none，不加就继续渲染原生样式 - 部分旧版 Opera 还要
-o-appearance: none（虽已基本淘汰，但遗留项目仍可能遇到） - 即使前缀全了，
select或input[type="button"]仍可能因border、background、padding残留而“看起来没变”
select 移除默认箭头后宽度和对齐错乱
移除默认样式后，select 的盒模型退化为标准块级行为，在 flex 容器里容易收缩、文字垂直居中偏移、右侧箭头区域塌陷。这不是 bug，是 UA 样式原本兜底的尺寸逻辑被清空了。
- 必须显式设置
box-sizing: border-box，否则padding会撑大元素 -
padding-right要预留足够空间（至少2rem），否则自定义箭头会被截断或重叠文字 - 若父容器是
display: flex，需给select加min-width: 0防止过度收缩 - 文字对齐建议用
line-height控制，别依赖 UA 的内部行高计算
如何真正隐藏原生箭头并插入自定义图标
仅靠 appearance: none 无法彻底清除箭头——某些系统 fallback 图标仍会浮现。可靠做法是用背景图覆盖 + 容器隔离：
立即学习“前端免费学习笔记（深入）”；
- 用
background-image: url("data:image/svg+xml,...")内联 SVG，避免请求开销 -
background-position: right 0.75rem center精确定位，background-size: 1em保证缩放一致性 - 包裹一层
div.select-wrapper并设position: relative，把select的background设为transparent，让箭头完全由父容器控制 - 如需交互反馈（比如展开时旋转箭头），改用
select:focus ~ .select-wrapper::after控制伪元素，而非直接操作select自身
最易被忽略的是可访问性：移除默认样式后，键盘导航（Tab/Space）和屏幕阅读器仍依赖原生 select 结构，所以绝不能用 div + JS 模拟替代；所有自定义都必须建立在真实语义化标签之上，且焦点样式必须清晰可见。
