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

New Hampshirite building web apps in Florida. Creator of Surreal CMS, Postleaf, and DirtyMarkup.

Need to get in touch? Catch me on Twitter.