CSS style input buttons for iOS devices

The really annoying thing about iOS devices is that they revert your button formatting back to their crappy default look. For me, that is REALLY annoying! I went through all of the effort to make my buttons look awesome, and then on mobile device (or even possible some other browsers) they look nothing like what I want.

There is a solution

Don’t worry though, there is a solution, and it is really really easy. In fact, there are two solutions that I know of. Here are both below:

Solution 1: If you are using SCSS (SASS) & Compass

If you are using SCSS (or SASS) and Compass then you can add the following include in your button CSS styling:

@include experimental(appearance, none);

So easy, and so effective!

Solution 2: For everyone else (i.e. not using SCSS & Compass)

If you are using standard CSS or some other CSS pre-processing language, then use Normalize.css! I will explain a bit about it below, as I think everyone should be using it, on all sites, whether you are using SCSS or not.

Normalize.css

Normalize.css is a modern, HTML5-ready alternative to CSS resets. Pretty much, it makes browsers render all elements more consistently and in line with modern standards. It precisely targets only the styles that need normalizing.

Personally, I love it and like I said above, I think it should be used on every site, no matter what type of CSS you are using. It good cause it really reduces the amount of “hacks” that you need to do to make things look standard on all browsers… and honestly who wouldn’t want that!

Where do you get it from?

You can download Normalize.css here >>> http://necolas.github.com/normalize.css/

Example

I thought I would create a CodePen to quickly show the difference between a “fixed” styled button and a “broken” styled button on an iOS device. To look at the difference, open the following CodePen on a desktop browser and look at how the input buttons are styled the same. Now open it on a iOS device (or possibly another browser you know that usually breaks css styled input buttons). You will notice that the left one looks good and the right one goes to the browser crappy default.

In this example I am using Solution 1, because if I used Solution 2 it would “fix” both the buttons and then my demo would be pointless.

CodePen Example

You can check it out here >>> Formatting an input button for iOS

To check out the code behind the example, click on “Edit this Pen” at the bottom left of the page.

What is CodePen?

If you don’t know what CodePen is and would like to know, check out this post where I explain a bit about CodePen.

Also, if you are interested in how you can use CodePen, check out this screencast from Chris Coyier.

Ok, well I hope this has helped some of you guys out and made your websites look even more awesome.

Any questions or comments, let me know below.

Thanks
Luca