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.

 

14 Responses to Stop iOS styling your input fields and buttons

  1. 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”]

  2. Terry M says:

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

Leave a Reply

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