停止Safari移动从给出输入按钮圆角

我想主题说这一切。在Iphone，Ipod或Ipad上查看时，我有一个Web应用程序，输入提交按钮具有圆角。有没有办法阻止它？停止Safari移动从给出输入按钮圆角

165

如果添加...

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

然后你的按钮将继承您已经申请了其他任何浏览器的CSS样式。

2011-03-10 17:36:04 Duopixel

这不适用于iPad2，iOS 5.1.1。但我不能肯定它不会在其他iOAS设备上工作，因为我没有任何测试。但是，Roel的'-webkit-border-radius：0px'解决方案*可以工作。 – CoreDumpError 2012-07-05 23:00:11

如果您没有应用-webkit-appearance：none，那么Safari会对其可应用的属性（即'font-size'和'color'）产生挑剔。最好的解决方案是同时应用这两个。 – Duopixel 2012-07-05 23:27:18

Reporting in以确认此解决方案适用于iPad，iOS 5.1.1。 – 2013-01-18 06:50:56

没有为我工作，-webkit外观：无。

这并不：

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

我有圆角同样的问题与背景图像的按钮，只需在iPhone上。

2011-12-16 08:33:06 Roel

确认：最高投票答案在这里（由Duopixel）不起作用，但Roel的答案是，这可能是由于苹果的移动webkit实施在这几个月中发生了变化。 – CoreDumpError 2012-07-05 23:02:12

@Cor eDumpError - 你的意思是它不适用于你。该解决方案为我工作 - 我刚刚实施它。不知道为什么我们遇到不同的结果。然后再一次，你的帖子是在半年前发布的，所以我无法判断你是否仍然遇到同样的问题。 – 2013-01-18 07:04:09

@Rel，你可能只是有优先问题......？ – 2014-06-25 11:58:48

我有一个网站输入提交类型=“图像”。上述固定圆角的这vairation：

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

2012-01-05 03:21:08 RevConcept

您可以尝试使用下面的CSS：

-webkit-appearance:none;

2013-09-06 12:03:54 dthukka

我发现，在iPad 2有你使用以下：

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

在你的按钮类。

2014-12-18 09:36:44

回答