How to remove box shadows from input controls on iOS

Heads up! This post was written in 2015, so it may contain information that is no longer accurate. I keep posts like this around for historical purposes and to prevent link rot, so please keep this in mind as you're reading.

— Cory

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.