Remove iOS input shadow

ios css input
WHITECOLOR picture WHITECOLOR · Apr 22, 2014 · Viewed 88.8k times · Source

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

example

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;
}

Answer

Mastrianni picture Mastrianni · Apr 22, 2014

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/

Related questions

iOS input focused inside fixed parent stops position update of fixed elements

The following happens on Mobile Safari iOS 6.1.2 Steps to reproduce Create a position: fixed element with an <input type="text"> element inside it. Actual result Input - not focused The position of the fixed elements is correct when …

Read More
position: fixed doesn't work on iPad and iPhone

I have been struggling with fixed positioning in iPad for a while. I know iScroll and it does not always seem to work (even in their demo). I also know that Sencha has a fix for that, but I couldn't …

Read More
How do I remove the blue styling of telephone numbers on iPhone/iOS?

Is there a way to remove the default blue hyperlink colour from a telephone number when viewed on an iPhone? Like a specific Mobile Safari tag or CSS to add? I only have this in place for the number: <…

Read More