109

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;
}
Cœur
  • 37,241
  • 25
  • 195
  • 267
WHITECOLOR
  • 24,996
  • 37
  • 121
  • 181

6 Answers6

231

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/

Mastrianni
  • 3,900
  • 3
  • 20
  • 32
  • 3
    You may also want to apply these styles to `input[type=password]`, too. – Rockallite Oct 11 '17 at 04:31
  • 1
    This post is almost 4 years old. Does this need updating? –  Dec 21 '17 at 06:06
  • 1
    The currently used Safari selector is `textarea, input[type="range"], input, input:matches([type="password"], [type="search"])` - just use it and it should work for all cases. – da_berni Aug 08 '19 at 09:14
  • For me it only worked when I applied `!important` to the `appearance`. Also `appearance` should work for `select`s as well. – RuiVBoas Apr 30 '20 at 09:06
35
background-clip: padding-box;

Seems to remove the shadows as well.

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

wittich
  • 2,079
  • 2
  • 27
  • 50
jstnrs
  • 565
  • 4
  • 9
  • 1
    `background-clip: padding-box;` will remove the shadow within the text input field on iOS. See http://codepen.io/jstnrs/pen/YXBLVN for example (make sure to open the URL on a iOS device). – jstnrs Aug 06 '15 at 08:48
  • 3
    This works, but does anyone know how it works? Thanks. – Nostalg.io Dec 14 '16 at 17:36
  • didn't worked for me but `-webkit-appearance: none;` did. – Lafi Mar 27 '20 at 13:37
8

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;
ShinyJos
  • 1,487
  • 11
  • 17
7

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;
}
Tom Spencer
  • 7,816
  • 4
  • 54
  • 50
  • I've upvoted this for handling the other input types, but from a quick check it seems that `:matches` isn't quite there yet for browser support (https://caniuse.com/css-matches-pseudo) I would write it out long form unless you are using some css preprocessor. – rtpHarry Feb 03 '21 at 20:03
4

I tried to come up with a solution that a.) works and b.) I am able to understand why it works.

I do know that the shadow for inputs (and the rounded border for input[type="search"]) comes from a background-image.

So obviously setting background-image: none was my first attempt, but this does not seem work.

Setting background-image: url() works, but i am still concerned about having a empty url(). Altough it currently is just a bad feeling.

background-clip: padding-box; seems to do the job as well, but even after reading the "background-clip" docs I don't get why this completly removes the background.

My favorite solution:

background-image: linear-gradient(transparent, transparent);

This is valid css and I do understand how it works.

Andreas Riedmüller
  • 1,217
  • 13
  • 17
  • @BugWhisperer It does work in iOS 12.4 for me: codepen.io/receter/pen/ymMzRG Can you provide more details? – Andreas Riedmüller Jul 30 '19 at 07:39
  • didnt work for me, but `background-clip: padding-box !important` worked. – oldboy Jul 31 '19 at 00:12
  • @BugWhisperer Can you check if the examples on https://codepen.io/receter/pen/ymMzRG work for you? Also can you try if ```background-image: linear-gradient(transparent, transparent) !important;``` works for you? I would be glad to know whats the issue here. – Andreas Riedmüller Jul 31 '19 at 13:23
  • unfortunately i just updated my phone. all of them work in safari and chrome through codepen, but i wonder if the you would get the same results if you tested it natively – oldboy Jul 31 '19 at 20:55
-7

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;
}
Reado
  • 1,412
  • 5
  • 21
  • 51