You spend all that time making your input text fields look nice, sit back and pat yourself on the back and then look at your masterpiece on your mobile phone only to see all your work be disrespected by mobile browsers on iOS. Drop shadow and rounded round have returned, WTF, how do I fix this?
Never fair, this is an easy fix and should be something you add to your stylesheets as a reset before you start.
What do you add to your CSS to stop iOS from overriding HTML form element styling?
Add -webkit-appearnce: none; and border-radius: 0; to the textarea & input element. Make sure you target the types and you can also add classes as shown below. It is reported that some browsers hide various input elements if you target all inputs with the general input selector. For this reason, I suggest, as you should always do, that you test your forms across all browsers.
textarea,
input.plain-text, /* this is a class */
input[type="text"],
input[type="button"],
input[type="submit"],
input[type=”email”],
input[type=”tel”],
input[type=”number”],
.input-radio-checkbox { /* this is a class */
-webkit-appearance: none;
border-radius: 0;
}That's it, you have reset the form inputs and they will display as you have designed them.
If you are interested I have written about another issue you should design for and that is the jarring input zoom that you may encounter. You can follow the below related link if you want to read about that and apply it at the same time.
Related: Stop Zoom of input on iOS mobile devices.
Thanks for reading and be sure to sign up for the newsletter and download my cheat sheets. Until next time. Seize the day!