Article 24 Tweet

Styling Submit Buttons for Mobile Safari

By Keir Whitaker @keirwhitaker

31 August 2010 | Category: Design

As discussed on the most recent episode of Think Vitamin Radio we have been working hard on the redesign of this site and have been looking at how the site reacts when rendered on the iPhone using media queries (if these are new to you then Brian Suda's most recent article will get you started).

One thing both Mike and I had noticed is that submit buttons, when styled with CSS, appear to have a will of their own when viewed on the iPhone.

Submit Button Demo

Here's some basic CSS for a submit button:

input[type="submit"] {
    background: #262C32;
    width: 150px;
    padding: 9px;
    letter-spacing: 1px;
    border: none;
    color: #EFDDA8;
    border-radius: 3px;
    -moz-border-radius: 3px;
    -webkit-border-radius: 3px;
}

There’s nothing complicated here. We are just adding some basic properties such as background colour, padding, letter-spacing and applying vendor-specific border-radius. Here’s what we get when viewed in the browser (Firefox in this case):

So far so good. Now let’s look at a screenshot of that same button viewed on the iPhone (screenshot taken from iPhone 4 Apple SDK simulator):

For some reason the button now has a gradient, the text is in the wrong position, the corners are very rounded and the padding appears to have not been applied. Not the intended result.

The Solution

Luckily there is a very quick solution to this problem. After some searching I found out that unless explicitly told mobile Safari will change the appearance of buttons & controls to resemble a native Apple control. Thankfully there’s a simple fix.

1
2
3
4
5
6
7
8
9
10
11
12

input[type="submit"] {
    background: #262C32;
    width: 150px;
    padding: 9px;
    letter-spacing: 1px;
    border: none;
    color: #EFDDA8;
    border-radius: 3px;
    -moz-border-radius: 3px;
    -webkit-border-radius: 3px;
    -webkit-appearance: none;
}

Notice the last line of our CSS? By adding -webkit-appearance: none; we are telling mobile Safari that we explicitly don’t want our button to be styled like a native Apple UI control.

After adding this to our button’s CSS we get the following result on the iPhone:

As you can see (and they are different screenshots) this is identical to our first picture.

If you haven’t already I am sure you will come across this when developing for the iPhone, I hope this saves you a few minutes head scratching.

Further Reading

• -webkit-appearance properties
• Trent Walton on -webkit-appearance
• Safari CSS Reference

Other Posts You Might Find Interesting

• Sorry - No Related Posts Found