appearance: none 需配合-webkit-appearance和-moz-appearance前缀才生效，且须重置border、background、padding等样式；select需额外处理箭头、宽高、对齐及iOS交互限制。
appearance: none 为什么有时不生效
直接写 appearance: none 常常没反应，根本原因是浏览器前缀未覆盖。Chrome、Safari 旧版、Firefox 对该属性的支持依赖不同前缀，且部分版本需配合其他样式才能真正“清空”原生控件外观。
- 必须同时写全：
-webkit-appearance: none、-moz-appearance: none、appearance: none - 仅设
appearance: none在 Safari 15.4 之前、Firefox 85 之前基本无效 - 即使加了前缀，若元素还带
border、background或padding，视觉上仍像“有样式”，需手动重置
下拉框（select）清除默认箭头的完整写法
原生 右侧的向下箭头是 UA 样式的一部分，appearance: none 只是移除整体控件外壳，箭头可能残留或被替换成系统 fallback 图标。要彻底隐藏并自定义，需组合处理：
- 用
background覆盖箭头区域（如background: url("data:image/svg...") no-repeat right 0.5rem center） - 或用
text-indent+text-overflow隐藏文字溢出时的箭头干扰（不推荐） - 更可靠的做法：包裹一层容器，用
::after伪元素画自定义箭头，并把原生箭头用background: transparent+padding-right挤出去
最小可用示例：
select {
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23666' stroke-width='2'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E") no-repeat right 0.75rem center;
background-size: 1em;
padding-right: 2.5rem;
border: 1px solid #ddd;
}
appearance: none 后 select 宽度和对齐异常
移除默认样式后， 的内部盒模型会退化为类似 的行为，尤其在 flex 或 grid 容器中容易收缩或错位。这不是 bug，而是 UA 样式原本承担了尺寸兜底职责。
立即学习“前端免费学习笔记（深入）”；
- 显式设置
min-width（如min-width: 120px），避免内容过短时塌缩 - 若父容器是
display: flex，需加flex: 1或width: 100%才能撑满 - 垂直对齐失效时，别只调
vertical-align，优先试height+line-height匹配，或改用align-items: center（flex 场景）
移动端 iOS Safari 的特别限制
iOS Safari（直到 iOS 16.4）对 appearance: none 的 有隐藏限制：样式可改，但点击区域仍触发原生选择器（即无法用自定义下拉菜单替代）。这意味着你看到的“已去除样式”，其实只是视觉层遮盖，交互逻辑未变。
- 不能靠纯 CSS 实现完全自定义下拉面板（如悬浮列表、搜索过滤）
- 若需真自定义交互，必须用 +
+- 此时
appearance: none已无意义，反而建议直接隐藏原生（opacity: 0; position: absolute），仅作表单值同步用真正跨端可控的方案，从来不是“怎么清掉默认样式”，而是“什么时候不该用原生 select”。
- 此时
