停止 Safari 手机提供圆角输入按钮

我想主题已经说明了一切。我有一个网络应用程序时，观看的 Iphone，Ipod 或 Ipad，输入提交按钮有圆角。有办法阻止这一切吗？

77261 次浏览

小开

If you add...

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

Then your buttons will inherit any CSS styles that you have applied for other browsers.

小开

Didn't work for me, the -webkit-appearance:none.

This does:

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

I had the same issue with rounded corners on a button with background image, just on the iPhone.

小开

I had a site with an input submit type="image". This vairation of the above fixed the rounded corners:

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

小开

You can try to use following CSS:

-webkit-appearance:none;

More info: http://trentwalton.com/2010/07/14/css-webkit-appearance/

小开

I've found that on iPad 2 you have to use the following:

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

in your button class.

小开

I've found that setting background: linear-gradient(color1, color2) gets rid of the overly rounded corners on Apple devices and works on all other browsers/platforms I have tried.

小开

I solved by adding code for both the "button" and "submit" types:

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