appearance: none 对 iOS Safari 的 、 等原生控件基本无效，是系统级限制而非写法错误；仅对 等基础控件在较新版本中部分生效，且必须配合 -webkit-appearance: none。
appearance: none 在 iOS Safari 上根本不起作用
直接说结论：appearance: none 对 iOS Safari 的 <select></select>、<input type="date">、<input type="number"> 等原生控件基本无效——不是写法错，是系统级限制。Apple 明确禁止完全覆盖这些控件的渲染逻辑，尤其涉及可访问性（如 VoiceOver）时。
常见错误现象：appearance: none 加了，下拉箭头还在；自定义背景色被忽略；边框圆角不生效；甚至整个控件变不可点击。
- 只对部分基础控件有效：如
<input type="text">、<textarea></textarea>、<button></button>在较新 iOS 版本中能响应appearance: none - 必须配合
-webkit-appearance: none（iOS 旧版本依赖这个前缀） - 即使生效，也需手动重写所有交互状态样式：
:focus、:active、:disabled，否则视觉反馈丢失
移动端表单重置的真实可行路径
别死磕 appearance，真正可控的方式是「绕过原生控件」或「最小化干预」：
- 用
<div contenteditable="true"> 模拟 <code><input type="text">，再用 JS 绑定input事件同步值（注意blur时校验） - 对
<select></select>，用visibility: hidden隐藏原生控件，另起一层<div> 做下拉菜单，用 <code>tabindex="0"和键盘事件维持可访问性 - 日期/时间选择器放弃自定义 UI，改用
<input type="date">+::-webkit-datetime-edit微调内部文本样式（仅限 Chrome / Android WebView） - 所有自定义方案都必须保留
role属性和aria-标识，否则屏幕阅读器会完全失焦 - 全局重置会让
<input type="checkbox">在 iOS 上显示为方块而非圆点，且无法恢复 -
border: 0+background: transparent对<select></select>无效，但会干扰其内部 padding 计算，导致点击热区偏移 - Android Chrome 85+ 开始限制
-webkit-appearance对<input type="range">的影响，强行重置会导致滑块拖动卡顿 - 优先保可访问性：用
screen reader only技巧隐藏视觉元素，但保留语义结构 - 避免在
scroll或touchmove中动态修改表单控件样式，iOS WebKit 会强制重绘并卡顿 - 测试真机比模拟器重要：iOS 16.4 修复了部分
::-webkit-inner-spin-button的样式穿透问题，但 iOS 15 仍存在 - 如果项目需深度定制，建议用 React/Vue 封装控件库（如
@radix-ui/react-select），它把平台差异封装在底层，而不是靠 CSS 强行 hack
为什么不能直接用 reset.css 全局清样式
移动端表单控件的默认样式不是纯 CSS 实现的，而是由浏览器引擎调用系统 UI 组件（如 UIKit 的 UIPickerView）。所以 all: unset 或 * { appearance: none } 不会清除它们，反而可能破坏布局流或触发 Safari 的兼容模式降级。
立即学习“前端免费学习笔记（深入）”；
兼容性与性能的关键取舍点
真正影响体验的不是“能不能去掉默认样式”，而是“去掉后用户是否还能直觉操作”。比如隐藏原生 <select></select> 后，如果没实现键盘上下键切换选项，视障用户就无法使用。
最常被忽略的是：用户点击原生日期控件弹出系统日历，这本身就是最优体验。强行替换成 JS 日历组件，反而增加包体积、降低加载速度、且难以匹配系统更新节奏。
