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
    Create Namespaced Classes with MooTools

    MooTools has always gotten a bit of grief for not inherently using and standardizing namespaced-based JavaScript classes like the Dojo Toolkit does.  Many developers create their classes as globals which is generally frowned up.  I mostly disagree with that stance, but each to their own.  In any event...

  • By
    5 Ways that CSS and JavaScript Interact That You May Not Know About

    CSS and JavaScript:  the lines seemingly get blurred by each browser release.  They have always done a very different job but in the end they are both front-end technologies so they need do need to work closely.  We have our .js files and our .css, but...

Incredible Demos

  • By
    MooTools 1.2 OpenLinks Plugin

    I often incorporate tools into my customers' websites that allow them to have some control over the content on their website. When doing so, I offer some tips to my clients to help them keep their website in good shape. One of the tips...

  • By
    Flexbox Equal Height Columns

    Flexbox was supposed to be the pot of gold at the long, long rainbow of insufficient CSS layout techniques.  And the only disappointment I've experienced with flexbox is that browser vendors took so long to implement it.  I can't also claim to have pushed flexbox's limits, but...

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!