必须同时设置-webkit-appearance: none、box-shadow: none、background-color、border等属性才能彻底清除iOS Safari input默认的圆角阴影；仅写appearance: none无效，且旧版iOS只认-webkit前缀。
iOS Safari 对 input 元素有强干预的默认样式，不显式重置就一定会被覆盖——这不是你选择器写得不够狠，而是系统在底层“锁死”了部分渲染逻辑。
必须加 -webkit-appearance: none，且不能只写标准版
旧版 iOS（尤其是 12–14）完全忽略 appearance: none，只认 -webkit-appearance: none。漏掉前缀 = 白写。
- 只写
appearance: none：iOS 13.3 及更早版本无效 - 只写
-webkit-appearance: none：现代 iOS 没问题，但为兼容建议两者都写 - 别全局重置：
* { -webkit-appearance: none }会干掉select、checkbox的原生交互，只针对input或具体类型如input[type="text"]
box-shadow 和 background-color 是最常漏掉的两项
很多人写了 -webkit-appearance: none 就以为完事了，结果输入框还是带灰白内阴影、背景发灰——那是因为 iOS 在 appearance 重置后，会 fallback 到系统默认背景 + 内阴影组合。
- 必须显式声明
box-shadow: none（-webkit-box-shadow: none在 iOS 14 前更稳） - 必须设
background-color: transparent或你想要的颜色；不设 = 回退到浅灰背景 - 若用了
border-radius却没配overflow: hidden，阴影可能从圆角边缘溢出，看起来像“去不干净”
placeholder 显示不全？先看 font-size 是否错位
iOS 对 input 和 ::-webkit-input-placeholder 的行高计算很敏感。placeholder 被截断、只显示一半，90% 是因为字体大小没对齐。
-
input的font-size必须 ≥::-webkit-input-placeholder的font-size，否则输入框高度撑不开 - 顺序很重要：CSS 中
input样式必须写在::-webkit-input-placeholder规则之前，否则会被覆盖 - 真机调试建议起始值：
input { font-size: 16px; }，::-webkit-input-placeholder { font-size: 14px; }
点击无响应或 :active 不生效？缺了 touchstart 激活
iOS Safari 默认禁用非可点击元素的 :active 状态，且对 input 的触摸事件响应延迟。不手动触发，:active 伪类永远不会渲染。
- 必须绑定空的
touchstart事件，哪怕只写document.body.addEventListener('touchstart', () => {}) - 更稳妥的做法是直接绑在
input上：input.addEventListener('touchstart', () => {}) - 如果用了 FastClick 库，需确认其
focus方法是否已适配 iOS 11.3+，否则键盘可能不弹出
真正难的不是写多少 CSS，而是意识到 iOS 的 input 渲染是分层接管的：appearance 控制结构，box-shadow/background-color 控制视觉层，font-size 控制文本层，touchstart 控制事件层——漏掉任意一层，都会表现为“样式失效”。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
