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 样式原本承担了尺寸兜底职责。
