阻止Safari移动设备为输入按钮提供圆角

82

我想这个话题说明了一切。在Iphone，Ipod或Ipad上查看时，我有一个Web应用程序，输入提交按钮带有圆角。有办法阻止这种情况吗？

ios mobile-safari

— 新手弗莱彻
source

185

如果添加...

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

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

— 行动方法
source

1

这不适用于iPad2，iOS 5.1.1。我不确定它是否可以在其他iOAS设备上运行，因为我没有任何可以测试的东西。但是，Roel的-webkit-border-radius:0px解决方案确实有效。

— coredumperror 2012年

如果您不应用-webkit-appearance：不应用，则Safari在可以应用在其上的属性上会变得挑剔（即font-size和color。最佳解决方案是同时应用这两种

— 方法

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

— Dominor Novus

6

回复2岁大的评论。-webkit-appearance：无；导致复选框在Chrome中不可见。可能也会影响其他元素和浏览器。

— matthew_360

哇！！！我们正在搜索几个小时以在cordova应用程序中解决此问题，这就是解决方案！我对此表示赞同！

— Jay Dinse 2015年

18

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

这样做：

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

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

— 罗尔
source

1

确认：此处（由Duopixel投票）的最高答案无效，但Roel的答案有效。这可能是由于在随后的几个月中对Apple的移动Webkit实施进行了更改。

— coredumperror

@CoreDumpError-您的意思是它不适合您。该解决方案为我工作-我刚刚实现了它。不知道为什么我们会遇到不同的结果。再说一次，您的帖子是半年前发表的，所以我无法确定您是否仍然遇到同样的问题。

— Dominor Novus

@Roel，您可能只是有优先权问题...？

— Frank Nocke 2014年

13

您可以尝试使用以下CSS：

-webkit-appearance:none;

— 德图卡
source

6

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

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

在您的按钮类中。

— 丹尼尔·F。
source

3

我有一个带有输入的网站，提交类型为“ image”。上面的这种变化固定了圆角：

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

— RevConcept
source

1

我发现该设置background: linear-gradient(color1, color2)摆脱了Apple设备上过分的圆角，并且可以在我尝试过的所有其他浏览器/平台上使用。

— it
source

这对我来说已经解决了，在我看来，这是最不可能产生意外副作用的选择。

— Wim Deblauwe，

1

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

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

— 阿尔维斯
source