CSS中如何解决input输入框在iOS上默认的圆角阴影？-css教程-PHP中文网

需用css重置ios safari input默认样式：先设-webkit-appearance: none，再配border-radius: 0、box-shadow: none、border、background-color等；search类型还需隐藏取消按钮；font-size建议不小于16px或加-webkit-text-size-adjust: 100%。

css中如何解决input输入框在ios上默认的圆角阴影？

iOS Safari 里 input 默认样式怎么去掉

iOS Safari 给 <input>（尤其是 type="text"、type="search"）加了一套内置样式：圆角 + 内阴影 + 蓝色边框 + 灰色背景，不显式覆盖就一定会出现。这不是 bug，是 WebKit 的默认 UA 样式，必须用 CSS 强制重置。

-webkit-appearance: none 是关键开关

-webkit-appearance: none 是绕过 iOS 输入框“皮肤”的第一道指令，它让元素退回到浏览器默认的无样式基础层。但注意：它只是起点，不是终点——只加这一条，可能还残留内边距、字体缩放或 focus 高亮。

必须配合 border-radius: 0 才能彻底消除圆角
必须加 box-shadow: none 才能干掉内阴影（iOS 的 inset 阴影不会被 appearance 影响）
建议同时设 border: 1px solid #ccc（或其他你需要的边框），否则可能看起来“消失”了
某些 iOS 版本对 type="search" 有额外 UA 样式，需单独加 input[type="search"]::-webkit-search-cancel-button 隐藏叉号

完整可用的一组重置规则

下面这段 CSS 覆盖了绝大多数 iOS 输入框异常表现，可直接复用：

CSS婚礼策划服务机构宣传网站模板

CSS婚礼策划服务机构宣传网站模板是一款适合提供婚礼策划和婚庆服务机构宣传网站模板下载。提示：本模板调用到谷歌字体库，可能会出现页面打开比较缓慢。

下载

input {
  -webkit-appearance: none;
  border-radius: 0;
  box-shadow: none;
  border: 1px solid #ddd;
  background-color: #fff;
}
<p>/<em> 清除 iOS 自动高亮 </em>/
input:focus {
outline: none;
-webkit-tap-highlight-color: transparent;
}</p><p>/<em> 隐藏 search 类型的取消按钮 </em>/
input[type="search"]::-webkit-search-cancel-button {
-webkit-appearance: none;
}</p>

注意：如果用了 font-size: 16px 以下，iOS 可能强制放大文本并导致布局跳动，建议最小设为 16px 或加 -webkit-text-size-adjust: 100%。

为什么不用 * { -webkit-appearance: none }？

全局重置会破坏很多原生组件体验，比如 <select></select>、<button></button>、<checkbox></checkbox> 在 iOS 上依赖 appearance 实现平台一致交互。只针对 input（或更细粒度到 input[type="text"]）下手，才是安全边界。

最常被忽略的是 box-shadow: none ——很多人以为 appearance: none 就万事大吉，结果阴影还在，盯着看半天才发现没清干净。