Remove iOS input shadow

You'll need to use -webkit-appearance: none; to override the default IOS styles. However, selecting just the input tag in CSS will not override the default IOS styles, because IOS adds it's styles by using an attribute selector input[type=text]. Therefore your CSS will need to use an attribute selector to override the default IOS CSS styles that have been pre-set.

Try this:

input[type=text] {   
    /* Remove First */
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;

    /* Then Style */
    border-radius: 15px;
    border: 1px dashed #BBB;
    padding: 10px;
    line-height: 20px;
    text-align: center;
    background: transparent;
    outline: none;    
}

Helpful Links:

You can learn more about appearance here:

http://css-tricks.com/almanac/properties/a/appearance/

If you'd like to learn more about CSS attribute selectors, you can find a very informative article here:

http://css-tricks.com/attribute-selectors/


Whilst the accepted answer is a good start, as others have pointed out, it only works for inputs whose type is "text". There are a myriad of other input types which also render as text boxes on iOS, and so we need to expand this rule to take into account these other types.

Here's the CSS I'm using to rid input text fields and textareas of the inner shadow, whilst preserving the default styling for buttons, checkboxes, range sliders, date/time dropdowns and radio buttons, all of which are authored using the humble <input> tag too.

textarea,
input:matches(
  [type="email"],
  [type="number"],
  [type="password"],
  [type="search"],
  [type="tel"],
  [type="text"],
  [type="url"]
) {
  -webkit-appearance: none;
}

webkit will remove all properties

-webkit-appearance: none;

Try using the property box-shadow to remove the shadow on your input element

box-shadow: none !important;

background-clip: padding-box;

Seems to remove the shadows as well.

As @davidpauljunior mentioned; be careful setting -webkit-appearance on a general input selector.

Tags:

Css

Ios

Input