[html] Turn off iPhone/Safari input element rounding

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 website.

Is there a way to instruct Safari (via CSS or metadata) not to round the input fields and render them rectangular as intended?

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.

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; }

I used a simple border-radius: 0; to remove the rounded corners for the text input types.

Here is the complete solution for Compass (SCSS):

input {
  -webkit-appearance: none;  // remove shadow in iOS
  @include border-radius(0);  // remove border-radius in iOS
}

For me on iOS 5.1.1 on a iPhone 3GS I had to clear the styling of a search field and the set it to the style intended

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

Doing -webkit-border-radius: 0; alone did not clear the native styling. This was also for a webview on a native app.

Please Try This one:

Try Adding input Css like this:

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

The accepted answer made radio button disappear on Chrome. This works:

input:not([type="radio"]):not([type="checkbox"]) {
    -webkit-appearance: none;
    border-radius: 0;
}

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; }

In order to render the buttons properly on Safari and other browsers, you'll need to give a specific style for the buttons in addition to setting webkit-appearance to none, e.g.:

border-radius: 0;
-webkit-appearance: none;
background-image: linear-gradient(to bottom, #e4e4e4, #f7f7f7);
border: 1px solid #afafaf

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

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