Styling buttons in iOS WebKit and -webkit-appearance:none

I just recently ran into an issue when styling buttons that had me pulling my hair for a while. I had my buttons looking the way they were supposed to look in desktop browsers, but when I went to have a look in Safari for iOS, much of my CSS wasn’t applied.

This was pretty puzzling as I couldn’t remember having any problems with buttons in Safari for iOS before. After taking a closer look at the CSS I was using for these particular buttons and the CSS I had used previously, I managed to find out what made the difference.

It turned out that the buttons that looked the same in iOS Safari as in the desktop browsers all had a background gradient. For some reason, applying a background gradient makes iOS for Safari drop its native styling of buttons and apply all of the CSS properties you have specified instead of just a few of them.

So far, so good. But the buttons I was working on this time did not have a gradient background. Well, Safari for iOS doesn’t care what colours the gradient uses – by setting the same starting and ending colours you get a solid background colour and the rest of the CSS properties get applied. As far as I can tell the behaviour is the same in iOS 4 and 5, and affects all WebKit-based iOS browsers.

For some examples, take a look at the Styling iOS WebKit buttons demo page I made.

While applying a dummy gradient did solve the problem, it feels pretty hacky. And there is an easier way. After a bit of searching I found a couple of articles talking about the -webkit-appearance property (described in the Safari CSS Reference). This property “Changes the appearance of buttons and other controls to resemble native controls.” Since I didn’t want the buttons to look like native buttons, I added a -webkit-appearance:none declaration to the CSS for my buttons, and that did the trick. Safari for iOS applied my CSS without the need for a background gradient.

So, when you want CSS for buttons to be applied in iOS WebKit browsers, you can either use a gradient for the background or add a -webkit-appearance:none declaration.

Posted on November 24, 2011 in CSS