必须加-webkit-appearance: none才能使border-radius: 0在ios safari中生效，因其默认启用系统原生渲染，绕过css圆角计算；禁用后需手动补全border、padding等基础样式，否则按钮可能塌陷或不可见。

移动端iOS Safari中input圆角无法用border-radius清除？

不是CSS没生效，是iOS Safari给input加了私有渲染样式，border-radius单独设为0常被忽略。必须配合-webkit-appearance: none才能真正剥离原生外观。

常见错误是只写：

input { border-radius: 0; }

——这在iOS上基本无效。

• -webkit-appearance: none是关键，它禁用系统控件默认样式（包括圆角、阴影、内边距）
• 禁用后需手动补全基础样式：如border、padding、background，否则可能变“看不见”或塌陷
• Android Chrome一般不强制圆角，但加-webkit-appearance: none可保证跨平台一致

为什么加了-webkit-appearance: none还残留圆角？

通常是因为父容器或伪元素干扰。iOS Safari有时会把input包裹在匿名内部盒子中，而border-radius实际作用在该盒子上。

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

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

下载

解决方法是把重置样式下推一层：

• 对input本身设border-radius: 0 + -webkit-appearance: none
• 同时加overflow: hidden，防止内部渲染溢出圆角
• 若仍无效，尝试outline: none（聚焦时的外发光也可能被误认为圆角）
• 避免用border: none代替border: 1px solid #ccc——无边框时部分iOS版本会回退到带圆角的“无样式态”

需要兼容微信内置浏览器吗？

需要。微信iOS版基于WKWebView，行为和Safari一致；安卓微信则更接近Chrome，但仍有少量定制渲染。统一方案最稳妥：

input {
  -webkit-appearance: none;
  appearance: none;
  border-radius: 0;
  overflow: hidden;
  border: 1px solid #ddd;
}

• appearance: none是标准属性，现代Android和桌面端也支持，作为-webkit-appearance的补充
• 微信安卓版偶尔会忽略border-radius: 0，此时加background-clip: padding-box可辅助裁切
• 不要依赖!important强行覆盖——微信某些版本会拦截带!important的表单样式

圆角消失后输入光标偏移或文字贴边怎么办？

因为-webkit-appearance: none清除了系统默认padding，文字直接顶到边框。这不是bug，是预期行为。

• 必须显式设置padding，例如padding: 8px 12px
• iOS键盘弹起时，若input高度过小（如height: 30px），文字可能被截断，建议用min-height替代height
• 如果使用box-sizing: border-box，注意padding会压缩内容区，需同步调整font-size或行高防挤压

实际项目里最容易漏的是overflow: hidden和手动补padding——这两处不处理，看起来就像“样式写了但没用”。

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！