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
    39 Shirts – Leaving Mozilla

    In 2001 I had just graduated from a small town high school and headed off to a small town college. I found myself in the quaint computer lab where the substandard computers featured two browsers: Internet Explorer and Mozilla. It was this lab where I fell...

  • By
    How I Stopped WordPress Comment Spam

    I love almost every part of being a tech blogger:  learning, preaching, bantering, researching.  The one part about blogging that I absolutely loathe:  dealing with SPAM comments.  For the past two years, my blog has registered 8,000+ SPAM comments per day.  PER DAY.  Bloating my database...

Incredible Demos

  • By
    Retrieve Your Gmail Emails Using PHP and IMAP

    Grabbing emails from your Gmail account using PHP is probably easier than you think. Armed with PHP and its IMAP extension, you can retrieve emails from your Gmail account in no time! Just for fun, I'll be using the MooTools Fx.Accordion plugin...

  • By
    GitHub-Style Sliding Links

    GitHub seems to change a lot but not really change at all, if that makes any sense; the updates come often but are always fairly small. I spotted one of the most recent updates on the pull request page. Links to long branch...

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!