Removing default input styles in iOS Safari

iOS Safari (and other mobile device browsers) apply their own default styling to HTML form input elements with rounded corners, drop shadows and bevels.

If you want to remove this styling, leaving you with a blank canvas to apply your own styles, you will struggle to using just the standard CSS properties such as “border”, “border-radius”, “box-shadow”, etc.

You can simply use the CSS “appearance” property to remove these styles:

-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
Did you like this post? Why not subscribe?

Leave a Reply

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