阻止Safari移动版给输入按钮圆角

Question

我猜标题已经说明了一切。我的一个Web应用程序在iPhone、iPod或iPad上查看时，输入提交按钮有圆角。是否有办法停止这种情况？

- Newbie Fletcher

Answer 1

If you add...

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

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

- methodofaction

---

这在iPad2，iOS 5.1.1上不起作用。虽然我没有其他iOS设备来测试，但我不能确定它在其他iOS设备上是否可行。然而，Roel的-webkit-border-radius:0px解决方案确实有效。 - coredumperror

如果您不应用-webkit-appearance: none，则Safari会对可以应用于其上的属性（即font-size和color）变得挑剔。最好的解决方案是同时应用两者。 - methodofaction

确认报告，此解决方案适用于iPad，iOS 5.1.1。 - Dominor Novus

回复一个两年前的评论...哦好吧。"-webkit-appearance: none;"会导致在Chrome中复选框不可见。这可能也会影响其他元素和浏览器。 - matthew_360

2022年，仍在为神的工作而努力。感谢@methodofaction将其添加到我的头部，效果非常好。 - Cyndi

Answer 2

对我来说没有用，-webkit-appearance:none。

这个可以：

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

我在iPhone上的一个带有背景图片的按钮上遇到了同样的圆角问题。

- Roel

---

确认：这里得到的最高票答案（由Duopixel提供）并不起作用，但Roel的回答可以。这可能是由于苹果移动端webkit实现在过去几个月中进行了更改所导致的。 - coredumperror

@CoreDumpError - 你的意思是这个方法对你不起作用。但这个解决方案对我有效 - 我已经实现了它。不确定为什么我们会有不同的结果。再说，你的帖子是半年前发布的，所以我不知道你是否仍然遇到相同的问题。 - Dominor Novus

@Roel，你可能只是有优先级问题...？ - Frank N

Answer 3

您可以尝试使用以下CSS：

-webkit-appearance:none;

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

- dthukka

Answer 4

我发现在iPad 2上你需要使用以下代码：

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

在你的按钮类中。

- Daniele F.

Answer 5

我有一个带有input submit type="image"的网站。以下变化修复了圆角：

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

- RevConcept

Answer 6

我通过为“button”和“submit”类型添加代码来解决了问题:

   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;
    }

- AGalvis

Answer 7

我发现设置background: linear-gradient(color1, color2)可以消除苹果设备上过度圆角的问题，并且在我尝试的所有其他浏览器/平台上都有效。

- mait

---

这对我有用，而且在我看来，这似乎是最不可能产生意外副作用的选项。 - Wim Deblauwe