移动端input默认样式不一致源于iOS Safari、Android Chrome、Samsung Internet对原生渲染逻辑差异，需用appearance: none配合统一padding、line-height、color: inherit及全前缀placeholder修复，并以box-shadow替代outline兼顾可访问性。
移动端 input 默认样式为什么总不一致
因为 iOS Safari、Android Chrome、Samsung Internet 对 input 的原生渲染逻辑完全不同：iOS 给 type="number" 加灰色背景和圆角，Android 原生控件保留增减按钮，Samsung 浏览器甚至会把 placeholder 渲染得比文字还小。这些不是 bug，是浏览器厂商对“表单语义”的不同理解——你写的 <input type="number">，它们各自决定怎么画。
appearance: none 必须配 padding + line-height 才生效
只写 appearance: none 是无效的。它只是藏起原生控件，但各标签默认 padding、line-height、font-size 依然不同，导致视觉高度错位、文字贴顶或截断。
- 所有输入控件统一设
padding: 0.5rem 0.75rem（不能用百分比或 em，移动端缩放易崩） -
line-height: 1.5（无单位数字，避免继承污染），且必须和font-size匹配，比如font-size: 16px→ 实际行高 ≈ 24px -
input[type="date"], input[type="time"]要额外加color: inherit，否则 iOS 里日期文字常是灰色不可读 -
textarea必须显式设resize: vertical或none，否则 Android 上拖拽区域和 placeholder 错位
placeholder 在 iOS Safari 和 Android WebView 中的渲染差异
iOS Safari 的 ::placeholder 有重绘 bug：点击输入框瞬间 placeholder 闪一下才消失；Android WebView 则常把 line-height 当作整个容器高度算，导致文字上浮。
- 必须写全前缀：
::-webkit-input-placeholder、::-moz-placeholder、:-ms-input-placeholder、::placeholder - 每个前缀里都加
line-height: 1.5和上下相等的padding-top/padding-bottom，锚定基线 - 别用
transform: translateY()微调位置——iOS 会触发 layout thrashing，滚动卡顿 - 如果项目需兼容微信内置浏览器（X5 内核），加一行
font-weight: normal !important，否则 placeholder 字体变粗压过文字
focus outline 替换方案在触屏设备上的可访问性陷阱
直接 outline: none 在 iPad 或安卓平板上等于废掉键盘导航。触屏用户虽不用 tab 键，但外接蓝牙键盘、Switch 控制器、VoiceOver 用户仍依赖 focus 状态。
立即学习“前端免费学习笔记（深入）”；
- 用
box-shadow: 0 0 0 2px rgba(0, 123, 255, 0.25)替代 outline，颜色选 WCAG AA 级对比度（如#007bff） - 必须加
:focus-visible兜底：.form-control:focus-visible { outline: 2px solid #007bff; }，否则纯键盘用户进不了表单 - 移动端点击触发 focus 时，
:focus会立即生效，但:focus-visible不会——这是浏览器故意设计，所以两个规则要并存，不能删其一 - 别给
outline-offset设负值（如-2px），iOS Safari 会把阴影裁掉一半
最易被忽略的是 input[type="search"]：它在 Safari 移动端自带右侧「清除」按钮，但这个按钮无法用 CSS 伪元素覆盖，只能用 appearance: none 配合自定义清空图标 —— 而这个图标的点击热区必须 ≥ 44×44pt，否则不符合 iOS 人机界面规范。
