Stop iOS styling your input fields and buttons

So, you’re designed a lovely website only to find out Apple’s iOS decides it wants to take the design into it’s control by styling your input fields i.e. adding rounded corners and dropshadows to text fields and input buttons. Well, it’s a very simple fix. Just add this to any input fields or buttons you don’t want restyling…

Now, if you are using rounded corners in your CSS then you can can leave out the border-radius selector.

UPDATE:

This is not the best way to do this as it certain things such as checkboxes will not display! It’s therefore best to target certain fields i.e.

 

  • Dave

    Thanks for the tip! Worked perfectly 🙂

  • You beauty! I’d made a lovely looking site and then iOS was destroying the submit buttons… this worked perfectly, thank you!

    • daretothink

      No worries. Glad it worked.

  • Where should i add this in say i have a site with WordPress plugin Contact form 7? Newbie
    And also so it doesent change the font?

    • greencode

      In your theme’s stylesheet