A Beautiful Site

How to remove box shadows from input controls on iOS

Those default box shadows that appear inside of your input elements on iOS can be pretty annoying, especially if you're going for a flat or subtle look. Here's how to remove them.

Unfortunately, it's not as simple as setting the box-shadow property to none. Instead, you have to alter the -webkit-appearance property:

input[type=text],
input[type=email],
input[type=password],
textarea {
  -webkit-appearance: none;
}

That gets rid of the shadow but, for best results, you'll probably want to set your own border, background, and — perhaps ironically — your own box shadow.