Stop Safari Mobile from giving input buttons rounded corners
I guess the subject says it all. I have a web application when viewed on an Iphone, Ipod or Ipad, input submit buttons have rounded corners. Is there a way to stop t开发者_开发知识库his?
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.
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 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;
}
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;
}
精彩评论