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 (ironically) your own box-shadow :)

Author avatar

About the author

Creator of Surreal CMS and other web things. Follow me for tweets about JavaScript, CSS, and web programming.