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

Answer 1

If this in a form block, add

-webkit-appearance: none;

iPhones can mess up forms. See here.

Answer 2

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