CSS Box Shadow not working on iPhone

Question

For some reason I can't get the CSS box-shadow to show up on Safari or Chrome on my iPhone. Here is the code:

input.error {
  box-shadow: 0 0 5px 1px rgba(224, 39, 14, 1);
  -webkit-box-shadow: 0 0 5px 1px rgba(224, 39, 14, 1); 
  -moz-box-shadow: 0 0 5px 1px rgba(224, 39, 14, 1);
}

The code is being used on HTML Input fields, would this cause any problems? What am I doing wrong?

Shows up in browser fine...

possible duplicate of [iPhone iOS will not display box-shadow properly](http://stackoverflow.com/questions/10757146/iphone-ios-will-not-display-box-shadow-properly) — user, Apr 14 '14 at 13:25

score 47 · Accepted Answer · edited Oct 16 '17 at 10:21

47

If this in a form block, add

-webkit-appearance: none;

iPhones can mess up forms. See here.

edited Oct 16 '17 at 10:21

Vel

9,027
6
34
66

answered Mar 15 '13 at 19:29

Bjoern

15,934
4
43
48

solved my problem box shadow wasnt showing up in mobile safari – Omar Aug 14 '20 at 22:35
1

there is an important comment in the link's answer by Johansrk: " and remember to put it before box-shadow, not after" – koubin Jun 30 '22 at 13:55

score 6 · Answer 2 · answered Mar 15 '13 at 19:30

6

Try adding -webkit-appearance: none; iOS tends to mess up forms.

answered Mar 15 '13 at 19:30

Chris Hawkes

11,923
6
58
68

score 2 · Answer 3 · answered Mar 15 '13 at 19:29

2

Because you write it mistake
try this:

-webkit-box-shadow: 0 5px 1px rgba(224, 39, 14, 1);

you just write 3 size for it

answered Mar 15 '13 at 19:29

Hamid Talebi

1,298
2
24
42

score 2 · Answer 4 · answered Jul 25 '20 at 14:11

2

I've tried EVERYTHING listed on the internet to fix this issue in a static sense. The ONLY thing I could get to work was to use the -webkit-box-shadow styling, but to add #222 like so:

-webkit-filter: drop-shadow(0.5px 1px 1px #222);

answered Jul 25 '20 at 14:11

The ARCHIT3CT

21
1

this works - but take note that this resets the ordering for css stacking. i.e. z-index will cease to work normally. refer to https://www.freecodecamp.org/news/4-reasons-your-z-index-isnt-working-and-how-to-fix-it-coder-coder-6bc05f103e6c/ – Mingsheng Oct 08 '20 at 09:17

score 0 · Answer 5 · answered Mar 31 '21 at 14:29

0

In my case I fixed adding ALL these rules:

-webkit-appearance: none;
border:0;
border-radius: 1px;
height: 1px;

In particular setting also the height.

answered Mar 31 '21 at 14:29

Diego D

1,706
19
23

CSS Box Shadow not working on iPhone

5 Answers5