Turn off iPhone/Safari input element rounding
HtmlCssIphoneMobile SafariCss ResetHtml Problem Overview
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?
Html Solutions
Solution 1 - Html
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;
}
Solution 2 - Html
input -webkit-appearance: none;
alone does not work.
Try adding -webkit-border-radius:0px;
in addition.
Solution 3 - Html
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.
Solution 4 - Html
The accepted answer made radio button disappear on Chrome. This works:
input:not([type="radio"]):not([type="checkbox"]) {
-webkit-appearance: none;
border-radius: 0;
}
Solution 5 - Html
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.
Solution 6 - Html
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
}
Solution 7 - Html
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; }
Solution 8 - Html
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; }
Solution 9 - Html
I used a simple border-radius: 0; to remove the rounded corners for the text input types.
Solution 10 - Html
Please Try This one:
Try Adding input
Css like this:
-webkit-appearance: none;
border-radius: 0;
Solution 11 - Html
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