Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

How to remove iPhone <button> styling?

http://ingoodtastemag.com/

On an iPhone, the button is round with a gradient. However, on every other desktop browser and Android that we've tested so far, it is square. I want the button to stay square. What CSS resets do I need for this?

like image 459
jemiloii Avatar asked Apr 04 '14 22:04

jemiloii


People also ask

How do I change the Apple button function?

To enable the new non-physical button, go to Settings on your iPhone and go to Accessibility > Touch and scroll down until you see Back Tap. After you turn on the Back Tap button, you will select double-tap and then choose the function you want to perform when you double-tap the back of your phone.


2 Answers

This rounded corner is the default property of the Safari browser and iOS 5 devices. To overwrite it, use the following styling for your button:

-webkit-appearance: none;
border-radius: 0;
like image 109
ShinyJos Avatar answered Oct 19 '22 02:10

ShinyJos


To keep your own border radius while removing the iOS styling

-webkit-appearance: none;
-webkit-border-radius: none;
border-radius: 10px;

You must remove webkit's border-radius to get your own style back, but you can still add your own border-radius after you remove theirs.

like image 33
sammy Avatar answered Oct 19 '22 01:10

sammy