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

Comments are disabled for this post (read why), but if you have spotted an error or have additional info that you think should be in this post, feel free to contact me.