Remove iOS input shadow

问题:

On iOS (Safari 5) I have to following for input element (top inner shadow):

I want to remove top shadow, bug -webkit-appearance doesn't save.

Current style is:

input {    
    border-radius: 15px;
    border: 1px dashed #BBB;
    padding: 10px;
    line-height: 20px;
    text-align: center;
    background: transparent;
    outline: none;    
    -webkit-appearance: none;
    -moz-appearance: none;
}

回答1:

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/

回答2:

background-clip: padding-box;

Seems to remove the shadows as well.

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

回答3:

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;

回答4:

This works better for me. Plus it means I don't have to apply it to every different type of input (i.e. text, tel, email, etc).

* {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
}