appearance: none 单独使用无效，需同时声明 -webkit-appearance: none、-moz-appearance: none 和 appearance: none；还需重置 padding、line-height、min-height，用 background-image 替代伪元素绘制箭头，并保留 focus-visible 焦点指示。
appearance: none 为什么没生效
只写 appearance: none 很大概率失效，尤其在 Safari 和旧版 Chrome 中。浏览器对这个属性的支持不一致，且它只是“尝试隐藏”原生控件，不是强制清除。
必须三者齐备：-webkit-appearance: none、-moz-appearance: none、appearance: none。缺一不可——Safari 主要认 -webkit-appearance，Firefox 认 -moz-appearance，现代浏览器才认标准 appearance。
- 漏掉任一前缀，下拉箭头或内边距残留就会出现
- 即使加了三属性，
select的默认padding和line-height仍因浏览器而异，必须显式设置 - 某些 iOS 版本（如 iOS 16.4）对
appearance: none的支持仍有 bug，需配合background-image遮盖残影
自定义下拉箭头必须用 background-image
伪元素 ::after 在 select 上不可靠：Safari 不支持给 select 添加伪元素，Firefox 对定位支持有限，且无法保证与文字垂直居中。
稳妥方案是用 background-image + background-position + background-size 绘制箭头，推荐 data URL SVG：
.form-select {
background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='%236b7280' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M6 8l2 2 2-2'/%3e%3c/svg%3e");
background-repeat: no-repeat;
background-position: right 0.5rem center;
background-size: 1em;
}
- 避免使用外部图片链接，防止跨域或加载失败导致空白
- SVG 中的
%23是#的 URL 编码，颜色值必须编码，否则 Safari 解析失败 - 设
background-position: right 0.5rem center比100% center更稳，避免因 padding 变化错位
padding 和 line-height 必须手动指定
不同浏览器给 select 的默认 padding 差异极大：Chrome 是 1px 12px，Safari 是 2px 8px，Firefox 可能带额外行高补偿。不重置就必然错位或文字截断。
关键参数建议统一写死：
-
padding: 0.5rem 0.75rem（等价于8px 12px），兼顾可点击区域和视觉密度 -
line-height: 1.25，避免 Safari 中文字下沉或上浮 -
min-height: 2.5rem（如40px），防止 Android WebView 下高度塌陷 - 禁用
height，改用min-height+padding控制，否则 iOS 会忽略
focus-visible 和键盘导航不能省
移除原生 outline 后，如果只靠 :focus 加边框，键盘用户（Tab 切换）将失去焦点指示——这违反 WCAG 2.1 标准，且在 Windows 高对比度模式下直接不可见。
正确做法是保留 :focus-visible 并搭配降级：
.form-select:focus-visible {
outline: 2px solid #409eff;
outline-offset: 2px;
}
.form-select:focus:not(:focus-visible) {
outline: none;
}
-
:focus-visible只在键盘触发时激活，鼠标点击不显示，体验更干净 -
:not(:focus-visible)降级处理是为了兼容老浏览器（如 Safari 15.4 以下） - 别忘了加
cursor: pointer，否则部分 Android 设备点击反馈弱
padding 值都要在五种浏览器里点开开发者工具反复验证——尤其是 Safari 的渲染引擎对 box-sizing 和 border-box 的处理，稍不注意就让整个表单高度错一层。前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
