input search on iphone

Question

I have the following appointment:

    <form class="area-search" action="">
      <input name="search" type="search" placeholder="O QUE ESTA PROCURANDO?">
      <button>Buscar</button>
    </form>

On iphone/ipad is rounding the corners of the search input. I tried to reset using border-radius: 0 !important; but with no results.

Answer 1

To remove input styles in Chrome and Safari from iPhone just use:

input {
-webkit-appearance: none;
}

For earlier versions of iOS use:

input {
-webkit-appearance: none;
border-radius: 0;
}