CODEWITHSUNDEEP
htmlcss
Romes
Romes

Reputation: 3118

CSS Box Shadow not working on iPhone

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

Upvotes: 22

Views: 20175

Answers (5)

Diego D
Diego D

Reputation: 1776

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.

Upvotes: 0

The ARCHIT3CT
The ARCHIT3CT

Reputation: 21

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

Upvotes: 2

Bjoern
Bjoern

Reputation: 16304

If this in a form block, add

-webkit-appearance: none;

iPhones can mess up forms. See here.

Upvotes: 50

Chris Hawkes
Chris Hawkes

Reputation: 12410

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

Upvotes: 6

Hamid Talebi
Hamid Talebi

Reputation: 1318

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

Upvotes: 2

Related Questions