Today I Had to Override Default Styling on an iOS HTML Input

On contract to help develop the new Visual Studio 2012 launch site, today I had to override the default styling on an iOS textbox. With both an iPhone and iPad in hand I discovered the following post on SO.

http://stackoverflow.com/questions/2918707/turn-off-iphone-safari-input-element-rounding

It’s simple. Since Safari is a webkit browser you simply need to apply the following styles.

input { -webkit-appearance: none; border-radius: 0; }

There are a couple caveats but read up at the link above for more info.

Posted in: Code Samples, Development  |  Tagged with: ,  |  Leave a comment
4 comments on “Today I Had to Override Default Styling on an iOS HTML Input
  1. Dave Iffland says:

    Thanks for posting this. I ran into the exact same issue last night.

  2. Sohail Rahim says:

    fantastic… just what i was looking for.
    thank you very much 🙂

Leave a Reply

Your email address will not be published. Required fields are marked *

*