Fix Button Borders in WebKit Mobile

Written by David Walsh on October 5, 2011 · 2 Comments

One of the focuses of the blog redesign I've been working on is mobile support. This current blog design is passable at best when it comes to mobile display, and with mobile sales booming, I need to make sure my site is optimized for these devices. When checking my blog's comment form on the iPad, I saw this ugly border around the "Post Comment" button:

Mobile WebKit Button

What a disgrace of a button! The light inset border is not at all what was intended. Luckily a quick CSS snippet removes the side effect:

-webkit-appearance: none;

And voila, button fixed:

Mobile WebKit Button

Resetting the -webkit-appearance property removes the ugly border and makes my mobile buttons look exactly as my desktop WebKit buttons. Mobile development doesn't need to mean we have less control over display!

Comments

  1. emehrkay October 5, 2011

    NIce! Thanks man

  2. What about -webkit-appearance: button; ?

Be Heard

Tip: Wrap your code in <pre> tags or link to a GitHub Gist!

Use Code Editor
Older
CSS4 Preview - Selectors
Newer
background-size Matters