iPhone上的奇怪CSS渲染

Question

我有一个简单的CSS来设置按钮样式：<input class="button" type="submit" value="Join">

...
.header__form-submit .button {
  background: #3371E3;
  border-radius: 0 5px 5px 0;
}
...

@media screen and (max-width: 767px) {
  ...
  .header__form-submit .button {
    width: 100%;
    border-radius: 5px;
  }
}

它可以在桌面，任何浏览器和Chrome中的移动预览中呈现。但是，当我在iPhone上打开它时，按钮有圆角。

Chrome预览：

iPhone可以是Chrome或Safari：

为什么会这样？ iOS上的样式<input />是否有问题？

谢谢

Answer 1

禁用默认操作系统样式

webkit-appearance: none;

编辑：将此添加到您的css

input {
-webkit-border-radius:0; 
border-radius:0;

}

以及以上一行。

Answer 2

要走的路是：

<button class="button" type="submit">Join</button>