Remove textarea inner shadow on Mobile Safari (iPhone)

Question

By default, it seems Mobile Safari adds the top inner shadow to all input fields, including textarea. Is there a way to remove it?

It's especially ugly when you have a white background.

score 353 · Accepted Answer · answered Jun 20 '10 at 05:49

353

By adding this css style:

-webkit-appearance: none;

answered Jun 20 '10 at 05:49

Lyon

7,144
10
29
45

28

be careful when adding this property on input type checkbox and radio button selectors, because it hides the checkboxes and radio buttons ;) – Zain Shaikh Nov 02 '12 at 16:11
14

Thanks for the answer Lyon. Btw, the best way to use it is to apply it only to `textarea, input[type="text"], input[type="submit"]`. – jgthms Sep 05 '13 at 15:19
Also don't apply this property to `select` element since it will look like normal input text. – Bobby Dec 17 '13 at 04:25
8

Don't forget `input[type="password"]` too. – Nick Pyett Mar 24 '14 at 12:05
7

Don't forget `[type="email"]` too! – Willster Nov 07 '14 at 12:13
37

Might be easier to use the not operator depending on what input types you are using: `input:not([type=checkbox]):not([type=radio])` – Justin Fisher Mar 31 '15 at 16:29
1

Also be careful not to apply this to – Oksana Romaniv Jun 09 '18 at 15:21
Man, you're a life saver :3 – Shuvo Habib Dec 06 '18 at 10:18

score 32 · Answer 2 · answered Feb 27 '14 at 23:24

32

While adding the CSS style

-webkit-appearance: none;

will work, it gets rid of everything. You may want to try this instead:

box-shadow: none !important;

This way you keep the down-arrow.

answered Feb 27 '14 at 23:24

Justin Tolchin

397
3
6

6

Just adding box-shadow property does not work. Inner shadow still shows up in Safari on iOS. – silentmouth Nov 27 '15 at 04:07

score 27 · Answer 3 · answered Jul 25 '16 at 16:40

27

Here is the easy solution

input[type=text] {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
}

answered Jul 25 '16 at 16:40

IqbalBary

918
1
9
16

score 9 · Answer 4 · edited Sep 17 '18 at 21:45

Sometimes you can have a stylesheet there broke the appearance: none; so a way to fix it when that happens is to use caret. The best way will be to rewrite your code and find out what's part of your code there mess up the style for none

Before using caret you need to know that it can get you some trouble with other styles

-webkit-appearance: caret;
   -moz-appearance: caret;
     -o-appearance: caret;
        appearance: caret;

NOTE: Use none, caret is not the optimal.

score 4 · Answer 5 · answered Feb 15 '19 at 07:28

4

https://stackoverflow.com/a/51626446/9287284

background-clip: padding-box;

and I found an older same answers comment at here.

https://stackoverflow.com/a/29750016/9287284

answered Feb 15 '19 at 07:28

KABA

121
5

score -30 · Answer 6 · edited Feb 19 '13 at 08:16

-30

Setting either background and border css properties of the input tag also seems to work.

Try this:

<style>
input {
    background: #ccc;
    border: none;
}
</style>

<form>
First name: <input type="text"/><br />
Last name: <input type="text" />
</form>

edited Feb 19 '13 at 08:16

Praful Bhatnagar

7,390
2
34
44

answered Jun 20 '10 at 05:56

MTS

57
5

10

Incorrect and misleading. Please test your code on the right device before posting... – Ariel Jan 07 '11 at 04:33
1

Really wrong answer, nothing about it is what OP ask about – Jacta Jun 18 '14 at 10:12

Remove textarea inner shadow on Mobile Safari (iPhone)

6 Answers6

Linked