appearance: none 对 select/date/number 无效是因 apple 系统级限制及旧浏览器主动拦截，非 css 错误；ios safari 强制调用 uikit 原生组件，仅 text/search/textarea 等基础控件在 ios ≥16.4 配合 -webkit-appearance: none 时部分生效。
appearance: none 为什么对 select / date / number 没用
不是你写错了，是 Apple 和部分旧浏览器主动拦截——appearance: none 在 iOS Safari 上对 <select></select>、<input type="date">、<input type="number"> 基本无效。它属于系统级渲染限制，而非 CSS 支持问题。
常见表现：箭头还在、背景色不生效、边框圆角被忽略、甚至控件变不可点击。Chrome/Android WebView 中部分有效，但 Safari（尤其 iOS）始终 fallback 到 UIKit 原生组件。
-
appearance: none只移除外层“外观框架”，不触碰内部结构（如<select></select>的下拉触发区） - 必须补全前缀：
-webkit-appearance: none（iOS 15.4 之前只认这个）、-moz-appearance: none（Firefox ESR） - 即使生效，也得手动重置
padding、border、background、font，否则残留的 UA 默认值会撑出“假阴影”或错位
IE 11 下 select 箭头清不掉的真正原因
IE 11 完全不支持 appearance: none，那个小三角根本不是靠它控制的——而是伪元素 select::-ms-expand。漏掉它，等于没动开关。
正确写法必须独立、显式、无嵌套：
select::-ms-expand {
display: none;
}
常见错误：
- 拼错为
::-ms-expand（少一个冒号）或::-ms-expand（多空格） - 写在
select规则块里，比如select { appearance: none; ::-ms-expand { display: none; } }—— CSS 不支持嵌套 - 没调
padding-right，清除后右侧留白，导致自定义箭头偏移或被裁切
移动端输入框内阴影去不干净怎么办
iOS 输入框的“内阴影”不是 box-shadow，是 UIKit 控件自带的视觉层。只写 appearance: none 没用，必须用 -webkit-appearance: none 先卸载原生皮肤。
四条关键重置缺一不可：
-
background-color: transparent（否则回退浅灰底 + 内阴影） -
border: 1px solid transparent（border: none可能触发渲染回退） -
outline: none（聚焦高亮环叠加后更像阴影） -
-webkit-tap-highlight-color: rgba(0,0,0,0)（点击瞬间蒙层易被误判）
顺带调 padding 和 line-height：移除 -webkit-appearance 后，UA 默认值仍保留，文字常贴边或上下不均，视觉上像有浮起感。
checkbox/radio 美化后焦点和可访问性断裂
只用 opacity: 0 + position: absolute 隐藏原生控件，会破坏屏幕阅读器识别（尤其 Safari + VoiceOver），且 outline 焦点框常错位或消失。
可靠做法是语义化隐藏：
- 必写
appearance: none+-webkit-appearance: none+-moz-appearance: none - 用
::before或::after绘制自定义图标，设content: ""和显式尺寸（如width: 18px; height: 18px） - 完整处理四种状态：
:checked、:focus-visible、:disabled、:indeterminate，漏任一都会导致键盘用户或辅助技术失焦 - 别用
display: none或visibility: hidden——控件必须保留在 DOM 流中，否则无法交互、无法聚焦
真正难的从来不是去掉箭头或阴影，而是去掉之后，还让高度一致、焦点可见、VoiceOver 能读出当前状态——这些细节一旦忽略，后期修复成本远高于一开始多写几行重置样式。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
