Stop iOS styling your input fields and buttons

Apple iOS insists on styling up your buttons and input fields, but if you want to stop that then find out how.

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…

-webkit-appearance: none;
border-radius: 0;

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.

textarea,
input.text,
input[type="text"],
input[type="button"],
input[type="submit"],
.input-checkbox {
-webkit-appearance: none;
border-radius: 0;
}

15 replies on “Stop iOS styling your input fields and buttons

  1. Avatar for ton ton says:

    Don’t forget input[type=”search”] or just use:

    -webkit-appearance: none !important;

  2. Avatar for chsweb chsweb says:

    If you are still finding this on Google, you will need to add a few more input types to the rule above, such as:

    [type=”email”]
    [type=”tel”]
    [type=”number”]

  3. Avatar for Terry M Terry M says:

    Wow that easy, had to add to Bootstrap 4!!

  4. Avatar for Zlatko Ristevski Zlatko Ristevski says:

    YOU ARE THE MAN

  5. Avatar for Rana Ehtasham Ali Rana Ehtasham Ali says:

    Does it works for select elements. As I have background color on select as well as options but they are not showing on ipad or iphone.

  6. Avatar for Miloš Simić Miloš Simić says:

    How do I apply this to checkboxes? EDIT: Better question since this can’t be applied to checkboxes. How do I fix stupid broken checkboxes on ios?

  7. Avatar for Prof. Voland Prof. Voland says:

    THANK YOU!

  8. Avatar for ssougnez ssougnez says:

    Thanks !

  9. Avatar for k1p57a k1p57a says:

    4 years late to the party, but I love you!

  10. Avatar for Jan te Pas Jan te Pas says:

    Great, Thanks a lot. This was What i was looking for!

  11. 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?

    1. Avatar for greencode greencode says:

      In your theme’s stylesheet

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

    1. Avatar for daretothink daretothink says:

      No worries. Glad it worked.

  13. Avatar for Dave Dave says:

    Thanks for the tip! Worked perfectly 🙂

Leave a Reply

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