Menu icon Foundation
Disable rounded buttons iOS7 (Foundation 4)

I have seen a few posts out there like: http://stackoverflow.com/questions/5263260/stop-safari-mobile-from-giving-input-buttons-rounded-corners

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

I am not able to stop the buttons from being rounded on iOS7 on either safari are chrome, they are both doing it. I have tried editing all radius settings and still no luck.

rounded buttonsbuttons

I have seen a few posts out there like: http://stackoverflow.com/questions/5263260/stop-safari-mobile-from-giving-input-buttons-rounded-corners

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

I am not able to stop the buttons from being rounded on iOS7 on either safari are chrome, they are both doing it. I have tried editing all radius settings and still no luck.

Justin Voelkel almost 6 years ago

You may need to add

-webkit-appearance:none;

Just realized that was included in that link you posted. You should make sure you are targeting the correct element too. If it's a button you should be aiming at class or button element. Hope that helps :)

LowTide76 almost 6 years ago

Thanks, having an issue overriding for that button that is defined by foundation. I just made a new class and was able to use the below with no issues.

-webkit-appearance:none;

Thanks for the reply