阻止 Safari Mobile 为输入按钮提供圆角

如果添加...

input, textarea {
  -webkit-appearance: none;
  border-radius: 0;
}

然后，您的按钮将继承您为其他浏览器应用的任何 CSS 样式。

-webkit-appearance:none 对我不起作用。

这样做：

input[type=submit] {
    -webkit-border-radius:0px;
}

我在带有背景图像的按钮上的圆角也有同样的问题，就在 iPhone 上。

您可以尝试使用以下 CSS：

-webkit-appearance:none;

更多信息：http://trentwalton.com/2010/07/14/css-webkit-appearance/

我发现在 iPad 2 上您必须使用以下内容：

-webkit-appearance:none;
border-radius: 0;

在您的按钮类中。

我有一个输入提交类型=“图像”的站点。上述的这种变化固定了圆角：

input[type=image] {
    -webkit-border-radius:0px;
}

我发现设置 background: linear-gradient(color1, color2) 可以消除 Apple 设备上的过度圆角，并且适用于我尝试过的所有其他浏览器/平台。

我通过为“按钮”和“提交”类型添加代码来解决：

   input[type="submit"] {
   text-align: center;
        -webkit-appearance:none;
        -webkit-border-radius:0px;
        border-radius:0;
        height:30px;
    }

    input[type="button"] {
        text-align: center;
        -webkit-appearance:none;
        -webkit-border-radius:0px;
        border-radius:0;
        height:30px;
    }