为何HTML按钮在iPhone上样式显示异常？附代码与效果对比

嘿，这个坑我踩过！iOS上的Safari浏览器会给表单控件（比如<input type="submit">这类按钮）施加一套自己的默认样式，优先级还挺高，直接把咱们自定义的CSS给覆盖了，这就是你看到效果差异大的原因。

核心解决方案：重置浏览器原生样式 #

只需要在你的.btn类里添加两个关键属性，就能让自定义样式正常生效：

• -webkit-appearance: none;：专门针对Safari（以及其他WebKit内核的iOS浏览器），禁用原生控件样式
• appearance: none;：兼容其他现代浏览器的标准写法

修改后的完整代码： #

CSS部分

.btn {
  background-color: #47ca6b;
  color: white;
  padding: 15px;
  margin: 10px 0;
  border: none;
  width: 100%;
  border-radius: 15px;
  cursor: pointer;
  font-size: 16px;
  font-weight: 700;
  /* 关键：禁用浏览器原生按钮样式 */
  -webkit-appearance: none;
  appearance: none;
  /* 可选：确保盒模型正确，避免padding导致宽度溢出 */
  box-sizing: border-box;
}

.btn:hover {
  background-color: #45a049;
}

/* 可选：自定义iOS点击态样式，替换默认的灰色高亮 */
.btn:active {
  background-color: #3d8b40;
}

HTML部分

<input type="submit" value="Sign Up" class="btn">

额外小提示 #

如果还是有细微差异，可以试试把<input type="submit">换成<button type="submit" class="btn">Sign Up</button>，Safari对<button>标签的样式支持会更灵活一些，不过上面的appearance属性已经能解决大部分问题啦。

内容的提问来源于stack exchange，提问作者Toby Mardles