Home » Ios » Stop Safari Mobile from giving input buttons rounded corners

Stop Safari Mobile from giving input buttons rounded corners

Posted by: admin November 30, 2017 Leave a comment

Questions:

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 this?

Answers:

If you add…

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

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

Questions:
Answers:

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.

Questions:
Answers:

You can try to use following CSS:

-webkit-appearance:none;

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

Questions:
Answers:

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

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

in your button class.

Questions:
Answers:

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