必须加 -webkit-appearance: none，否则 Safari 会因 UA 样式层“渲染锁”忽略 border-radius、padding、box-shadow；需同时声明 -webkit-、-moz- 和 appearance 三者，并补全 box-sizing、padding、margin、box-shadow、outline 等重置样式。
必须加 -webkit-appearance: none，否则所有 border-radius、padding、box-shadow 都可能被 Safari 忽略或延迟生效。
为什么 border-radius: 0 单独写没用？
iOS Safari 对 input[type="submit"]、input[type="button"]、input[type="reset"]、select 等默认启用 -webkit-appearance: button（或 menulist 等），这是一个 UA 样式层的“渲染锁”——它会劫持 border、background、圆角甚至点击反馈逻辑。
常见错误现象：
- 页面首次加载时按钮仍是大圆角，点一下才变直角
- 写了
border-radius: 0但 DevTools 显示它“已计算”，却没渲染出来 - 加了
!important仍无效
实操建议：
- 必须同时声明三者：
-webkit-appearance: none、-moz-appearance: none、appearance: none；仅写-webkit-前缀在 iOS 15.4+ 或跨浏览器场景下不稳定 - 不能只针对
button或通配符* { -webkit-appearance: none }，那会破坏select下拉交互、checkbox视觉反馈等原生体验 - 对
input[type="search"]要单独处理：它默认是-webkit-appearance: searchfield，也得显式设为none
-webkit-appearance: none 后还缺什么？
清除了系统接管，不等于样式就“自由”了。iOS 仍会保留私有内边距、阴影、字体耦合等 UA 行为，必须补全关键声明。
实操建议：
- 立刻加
box-sizing: border-box：否则你写的padding会撑宽控件，尤其在width: 100%场景下容易溢出 - 显式重置
padding和margin：input { padding: 0; margin: 0; }，通配符* { padding: 0 }对 iOS 无效，因为它的默认 padding 来自input:-webkit-search-decoration这类隐藏 UA 选择器 - 清除阴影：
box-shadow: none—— 很多人以为 appearance 清掉就完事了，结果按钮仍有内嵌灰影 - 处理 focus 状态：
outline: none+-webkit-tap-highlight-color: transparent，否则点击高亮或聚焦边框还会跳出来
哪些控件要特别小心？
不是所有表单元素都一样。iOS 对不同 type 的 input 有差异化 UA 样式，必须按需打击。
实操建议：
-
input[type="date"]、input[type="number"]：内置-webkit-padding-start: 8px类似私有 padding，且和font-size耦合，文字易偏上或被裁；必须加-webkit-appearance: none才能真正覆盖 -
input[type="search"]：除none外，还得清除取消按钮：input[type="search"]::-webkit-search-cancel-button { -webkit-appearance: none; } -
select：加none后原生下拉箭头消失，得用::after模拟；某些 iOS 版本（如 16+）即使清了 appearance，仍强制最小圆角约2px，需再写border-radius: 0并真机验证 -
textarea：iOS 默认padding: 2px 4px，且resize控件占位，建议统一设padding: 12px 16px+resize: none
最容易被忽略的是 viewport meta 和 body margin：没加 会导致页面缩放，“假外边距”干扰判断；而 body 默认 margin: 8px 在旧项目中可能还在起作用，别让它和 input 的样式问题混在一起排查。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
