414

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?

Improve this question
3
  • 1
    I wonder why NO CSS reset seems to contain that super easy css rule. It's braindead.
    – Toskan
    Jan 13, 2016 at 19:44
  • 1
    I actually created a CSS reset based on eric meyer's css reset 2 with the added necessary css you find in the answer here. It is available on github: github.com/Jossnaz/JossiCssReset
    – Toskan
    Jan 14, 2016 at 0:03
  • 2
    Be careful with -webkit-appearance: none;, I think better to limit this condition to the scope of a specific input element. Otherwise it can to hide radio input elements if you have them on the page.
    – quas
    Aug 7, 2018 at 16:31

11 Answers 11

Reset to default
726

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;
}
Improve this answer
17
  • 1
    As of iOS 5, this will only remove the inner shadow. Check Piyush's answer to remove the rounded corners as well.
    – Jon
    Mar 7, 2012 at 21:50
  • 6
    -webkit-appearance actually has nothing to do with inner shadow and rounded corners. Don't use it just for that. css-infos.net/property/-webkit-appearance
    – Rudie
    Jul 5, 2012 at 9:37
  • 18
    "If IOS wants rounded corners and shadows, let IOS users have them": That's completely unacceptable in my situation, and probably in most others' as well.
    – coredumperror
    Mar 31, 2014 at 22:20
  • 2
    !!you should not use this method, It makes checkbox seems to be unavailable Because of this, many of my site users doesn't proceed in payment agreement.!!
    – synthresin
    Apr 27, 2014 at 6:44
  • 11
    For <input type="search"> on iOS 10 I still needed -webkit-appearance: none;.
    – Gabriel Smoljar
    Feb 3, 2017 at 14:38
59

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

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

Improve this answer
2
  • 1
    I did need to add the -webkit-border-radius attribute to <input type="text"> to remove the rounded corners in iOS 5.
    – Jon
    Mar 7, 2012 at 21:48
  • 1
    Don't need to add px after the 0
    – mintedsky
    Oct 24, 2015 at 23:37
48

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.

Improve this answer
1
  • 2
    I've found that using input[type] seems to do the trick for all inputs.
    – JacobTheDev
    Nov 6, 2018 at 21:21
12

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

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

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.

Improve this answer
8

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
}
Improve this answer
2
  • 17
    Just a note, the @include border-radius(0); mixin is only available if you have defined it yourself or are using the Compass framework, not just vanilla SASS.
    – waffl
    Apr 22, 2013 at 10:27
  • Just a note, if you're using SCSS, you should probably be using autoprefixer too.
    – Christian
    Jun 22, 2015 at 7:46
5

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; }
Improve this answer
4

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

Improve this answer
3

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

Improve this answer
3

Please Try This one:

Try Adding input Css like this:

 -webkit-appearance: none;
       border-radius: 0;
Improve this answer
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
Improve this answer

Not the answer you're looking for? Browse other questions tagged or ask your own question.