Fix Button Borders in WebKit Mobile

By  on  

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!

Recent Features

  • By
    Write Simple, Elegant and Maintainable Media Queries with Sass

    I spent a few months experimenting with different approaches for writing simple, elegant and maintainable media queries with Sass. Each solution had something that I really liked, but I couldn't find one that covered everything I needed to do, so I ventured into creating my...

  • By
    Introducing MooTools Templated

    One major problem with creating UI components with the MooTools JavaScript framework is that there isn't a great way of allowing customization of template and ease of node creation. As of today, there are two ways of creating: new Element Madness The first way to create UI-driven...

Incredible Demos

  • By
    Animated 3D Flipping Menu with CSS

    CSS animations aren't just for basic fades or sliding elements anymore -- CSS animations are capable of much more.  I've showed you how you can create an exploding logo (applied with JavaScript, but all animation is CSS), an animated Photo Stack, a sweet...

  • By
    jQuery topLink Plugin

    Last week I released a snippet of code for MooTools that allowed you to fade in and out a "to the top" link on any page. Here's how to implement that functionality using jQuery. The XHTML A simple link. The CSS A little CSS for position and style. The jQuery...

Discussion

  1. emehrkay

    NIce! Thanks man

  2. Denver

    What about -webkit-appearance: button;?

Wrap your code in <pre class="{language}"></pre> tags, link to a GitHub gist, JSFiddle fiddle, or CodePen pen to embed!