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

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

Impracticable

I wonder why NO CSS reset seems to contain that super easy css rule. It's braindead. – Nakada

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 – Nakada

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. – Alvinaalvine

Answer 1

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

Betthezel

As of iOS 5, this will only remove the inner shadow. Check Piyush's answer to remove the rounded corners as well. – Danieldaniela

@Danieldaniela Freeland: Thanks, I updated my answer (and voted his up). – Betthezel

-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 – Premiership

@crmpicco: With or without border-radius? – Betthezel

@BoltClock'saUnicorn It required border-radius to work on iOS 7. – Nonprofit

@Premiership then what's the "right" way to remove Mobile Safari's rounded corners? -webkit-appearance seems to work fine. – Rookie

"seems to work fine" is where developers create horrors. There are numerous exceptions you can't find that others will experience if you MISuse appearance for this, and suddenly forms are broken for some people, but they don't see that, because it doesn't show etc etc etc. If IOS wants rounded corners and shadows, let IOS users have them. – Premiership

"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. – Rookie

i have found out that by setting background-size: 0px; on ios7 in the webview in a phonegap app you can actually format the borders as you like. – Pebble

!!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.!! – Casseycassi

It's enough to only use border-radius: 0;. According to caniuse.com, browser share of Safari for iOS 3-4 is now less than 0.01%. – Haman

@Don McCurdy: Updated my answer. – Betthezel

For <input type="search"> on iOS 10 I still needed -webkit-appearance: none;. – Tedmund

for iOS13 and bootstrap button with border, border-radius isn't enough either, -webkit-appearance: none; has to be set as well. Thanks for the hint – Erda

"If iOS wants...." @Rookie just have the need to put here how right you are! – Indira

@DonMcCurdy is not enough for some cases, like input search. Needs to be with the appearance rule as well, Gabriel said – Indira

Here to confirm that, at least for <input type="search">, both -webkit-appearance: none; and an explicit border-radius style are still necessary in 2021 on iOS 14.4. – Heterocyclic

Answer 2

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

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

Deviled

I did need to add the -webkit-border-radius attribute to <input type="text"> to remove the rounded corners in iOS 5. – Danieldaniela

Don't need to add px after the 0 – Beck

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.

Penrose

I've found that using input[type] seems to do the trick for all inputs. – Dagall

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

Ache

Answer 5

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.

Nerveracking

Answer 6

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
}

Muscadel

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. – Reichstag

Just a note, if you're using SCSS, you should probably be using autoprefixer too. – Galleass

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

Erotica

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

Heidt

Answer 9

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

Neritic

Answer 10

Please Try This one:

Try Adding input Css like this:

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

Steeplechase

Answer 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

Subreption