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

I had the same problem but only for the submit button. Needed to remove the inner shadow and rounded corners -

input[type="submit"] { -webkit-appearance:none; -webkit-border-radius:0; }

Answer 2

Please Try This one:

Try Adding input Css like this:

 -webkit-appearance: none;
       border-radius: 0;

Answer 3

It is the best way to remove the rounded in IOS.

textarea,
input[type="text"],
input[type="button"],
input[type="submit"] {
     -webkit-appearance: none;
     border-radius: 0;
}

Note: Please don't use this code for the Select Option. It will have problem on our select.

Answer 4

input -webkit-appearance: none; alone does not work.

Try adding -webkit-border-radius:0px; in addition.

Answer 5

On iOS 5 and later:

input {
  border-radius: 0;
}

input[type="search"] {
  -webkit-appearance: none;
}

If you must only remove the rounded corners on iOS or otherwise for some reason cannot normalize rounded corners across platforms, use input { -webkit-border-radius: 0; } property instead, which is still supported. Of course do note that Apple can choose to drop support for the prefixed property at any time, but considering their other platform-specific CSS features chances are they'll keep it around.

On legacy versions you had to set -webkit-appearance: none instead:

input {
    -webkit-appearance: none;
}