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?

I wonder why _NO_ CSS reset seems to contain that super easy css rule. It's braindead. — Toskan, Jan 13 '16 at 19:44
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: https://github.com/Jossnaz/JossiCssReset — Toskan, Jan 14 '16 at 00:03
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 07 '18 at 16:31

score 724 · Accepted Answer · edited Jun 17 '20 at 10:29

724

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

edited Jun 17 '20 at 10:29

Abdull

26,371
26
130
172

answered May 27 '10 at 05:39

BoltClock

700,868
160
1,392
1,356

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 07 '12 at 21:50
@Jon Freeland: Thanks, I updated my answer (and voted his up). – BoltClock Mar 07 '12 at 21:55
6

`-webkit-appearance` actually has nothing to do with inner shadow and rounded corners. Don't use it just for that. http://css-infos.net/property/-webkit-appearance – Rudie Jul 05 '12 at 09:37
@crmpicco: With or without `border-radius`? – BoltClock Dec 02 '13 at 11:57
@BoltClock'saUnicorn It required `border-radius` to work on iOS 7. – crmpicco Dec 02 '13 at 12:04
@Rudie then what's the "right" way to remove Mobile Safari's rounded corners? `-webkit-appearance` seems to work fine. – coredumperror Mar 20 '14 at 00:08
"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. – Rudie Mar 20 '14 at 15:28
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 '14 at 22:20
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. – memical Apr 25 '14 at 13:06
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 '14 at 06:44
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%. – Don McCurdy Feb 18 '16 at 17:24
@Don McCurdy: Updated my answer. – BoltClock Feb 18 '16 at 17:39
11

For `` on iOS 10 I still needed `-webkit-appearance: none;`. – Gabriel Smoljar Feb 03 '17 at 14:38
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 – EvilSmurf Jan 08 '20 at 16:21
"If iOS wants...." @coredumperror just have the need to put here how right you are! – Héctor León Mar 31 '20 at 11:20
@DonMcCurdy is not enough for some cases, like input search. Needs to be with the appearance rule as well, Gabriel said – Héctor León Mar 31 '20 at 11:20
Here to confirm that, at least for ``, both `-webkit-appearance: none;` and an explicit `border-radius` style are still necessary in 2021 on iOS 14.4. – Andron Apr 16 '21 at 22:37

score 60 · Answer 2 · edited Dec 21 '11 at 16:19

60

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

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

edited Dec 21 '11 at 16:19

Dave Newton

158,873
26
254
302

answered Jan 22 '11 at 10:50

justadev

1,049
9
10

1

I did need to add the `-webkit-border-radius` attribute to `` to remove the rounded corners in iOS 5. – Jon Mar 07 '12 at 21:48
1

Don't need to add px after the 0 – mintedsky Oct 24 '15 at 23:37

score 49 · Answer 3 · answered Jan 21 '14 at 02:32

49

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.

answered Jan 21 '14 at 02:32

KoemsieLy

722
8
11

2

I've found that using `input[type]` seems to do the trick for all inputs. – JacobTheDev Nov 06 '18 at 21:21

score 12 · Answer 4 · answered Mar 16 '16 at 17:52

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

answered Mar 16 '16 at 17:52

François Romain

13,617
17
89
123

score 8 · Answer 5 · answered Aug 23 '12 at 16:59

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.

score 8 · Answer 6 · edited Jul 01 '13 at 08:04

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
}

edited Jul 01 '13 at 08:04

dalgard

3,614
2
22
28

answered Nov 08 '12 at 10:54

Johansrk

5,160
3
38
37

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 '13 at 10:27
Just a note, if you're using SCSS, you should probably be using autoprefixer too. – Christian Jun 22 '15 at 07:46

score 5 · Answer 7 · answered Sep 05 '12 at 16:55

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

answered Sep 05 '12 at 16:55

seanjacob

2,238
1
22
25

score 4 · Answer 8 · answered Feb 09 '15 at 11:04

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

score 3 · Answer 9 · answered Oct 12 '12 at 01:15

3

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

answered Oct 12 '12 at 01:15

Jesse

31
1

score 3 · Answer 10 · answered Sep 18 '15 at 05:40

3

Please Try This one:

Try Adding input Css like this:

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

answered Sep 18 '15 at 05:40

Ivin Raj

3,448
2
28
65

score 0 · Answer 11 · answered Aug 15 '17 at 20:51

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

11 Answers11

Linked

Related