SEO, SEM, web design, coding, iPhone, iPad, Android 

Once merchants are successful in domestic markets, many of them weigh the benefits of expanding their operations abroad. The many challenges accompanying overseas expansion, including language optimization, SEO, taxation and credit card processing, can seem daunting. We asked Jim McGeever, chief operating officer of NetSuite, a publicly-traded ecommerce and management platform, about his company’s experiences in overseas expansion and how ecommerce merchants can learn from them. Practical eCommerce: Please tell us about NetSuite’s efforts to facilitate overseas expansion efforts. Jim McGeever: "Our OneWorld product allows people to operate in multiple countries around the world. A company with a headquarters in the U.S. could hav...

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:

1
2
3
4
5
6
7
8
9
10
11

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