原生表单在android和ios上无法自动统一，因系统渲染逻辑不同；必须先用appearance: none剥离原生样式，显式隐藏伪元素，手动模拟下拉箭头，并用:user-invalid替代:invalid做验证反馈，同时硬编码font-size和line-height确保兼容性。
原生表单在 Android 和 iOS 上根本没法“自动统一”，因为两套系统对 input、select、textarea 的渲染逻辑完全不同——iOS 的 input[type="date"] 没法调 padding，Android 的 input[type="number"] 会默认加增减按钮，Safari 对 ::-webkit-inner-spin-button 的支持又和 Chrome 不一致。不重置就套框架类，只会让问题更隐蔽。
必须先重置 appearance 和原生干扰
所有表单控件第一步不是加样式，而是剥离操作系统渲染层：
-
appearance: none要写在input、select、textarea、button上，不能只写在某个 class 里 -
::-webkit-inner-spin-button和::-webkit-calendar-picker-indicator必须显式设为display: none，否则 Android Chrome 和 iOS Safari 仍会显示残余控件 -
outline: none可以加，但得同时保留:focus-visible，否则键盘用户会丢失焦点提示 - 别信“加个
form-control就完事”——Bootstrap 的.form-control默认没关appearance，Tailwind 的peer类也不管原生箭头
select 下拉箭头必须用 data URL + padding-right 模拟
iOS 和旧版 Android 完全忽略 background-image 在 select 上的渲染，伪元素 ::after 在部分 WebView 里失效，唯一可靠方案是内联 SVG + 手动预留空间：
select {
appearance: none;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='4'%3E%3Cpath d='M4 0h6L7 4'/%3E%3C/svg%3E");
background-repeat: no-repeat;
background-position: right 0.5rem center;
background-size: 1em;
padding-right: 1.5rem; /* 必须比 background-size 大，否则文字被遮 */
}
注意：padding-right 值要大于 background-size，且不能依赖 em 单位——iOS 字体缩放会把它撑变形，用 rem 或固定 px 更稳。
Android 和 iOS 对 :invalid 的触发时机不一致
Chrome（Android）在输入时实时触发 :invalid，Safari（iOS）默认要提交后才生效，光靠这个伪类做验证反馈会漏掉大量场景：
- 必须搭配
:user-invalid使用，它在用户修改后即生效，目前 Edge 105+、Chrome 109+、Safari 16.4+ 都支持 - 别只改
border-color——Android WebView 里:invalid有时不触发重绘，建议同步加box-shadow: 0 0 0 2px var(--error-color) -
input[type="email"]在 iOS 上对中文邮箱（如 xxx@公司.cn）常误判为无效，得靠 JS 补充校验，CSS 层面只能兜底
字体大小和 line-height 在 Android WebView 里容易塌陷
Android 低版本 WebView（尤其 4.4–6.x）对 font-size 和 line-height 的继承极不稳定，input 内部文字常偏小或上下偏移：
- 显式写死
font-size: 16px，不用rem或%，避免父级 font-size 缩放干扰 -
line-height设为无单位数值（如1.4），别用px——Android 会忽略带单位的值 - 垂直居中别依赖
padding-top/padding-bottom相等，加height后再用display: flex; align-items: center更可靠 - 测试时务必真机跑 Android 5–8 的 WebView，模拟器经常骗人
最麻烦的从来不是怎么写 CSS，而是哪些地方必须硬编码、哪些地方能交给框架——比如 appearance: none 在 iOS 15.4+ 才完全稳定，而 Android 7 以下的 WebView 连 :focus-visible 都不认。实际项目里，往往得用 JS 检测 UA 后动态加 class 来打补丁，纯 CSS 没有银弹。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
