Turn off iPhone/Safari input element rounding

Question

My website renders well on the iPhone/Safari browser, with one exception: My text input fields have a weird rounded style which doesn\'t look good at all with the rest of my

Answer 1

If you use normalize.css, that stylesheet will do something like input[type="search"] { -webkit-appearance: textfield; }.

This has a higher specificity than a single class selector like .foo, so be aware that you then can't do just .my-field { -webkit-appearance: none; }. If you have no better way to achieve the right specificity, this will help:

.my-field { -webkit-appearance: none !important; }