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?

回答1:

On iOS 5 and later, good ol' border-radius does the trick:

input {     border-radius: 0; } 

If you must only remove the rounded corners on iOS or otherwise for some reason cannot normalize rounded corners across platforms, use the prefixed -webkit-border-radius 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; } 

回答2:

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

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

回答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.

回答4:

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

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

回答5:

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 } 

回答6:

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.

回答7:

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

回答8:

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

回答9:

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

回答10:

Please Try This one:

Try Adding input Css like this:

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

回答11:

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 

文章来源: Turn off iPhone/Safari input element rounding