Remove textarea inner shadow on Mobile Safari (iPhone)

问题

By default, it seems Mobile Safari adds the top inner shadow to all input fields, including textarea. Is there a way to remove it?

It's especially ugly when you have a white background.

回答1:

By adding this css style:

-webkit-appearance: none;

回答2:

While adding the CSS style

-webkit-appearance: none;

will work, it gets rid of everything. You may want to try this instead:

box-shadow: none !important;

This way you keep the down-arrow.

回答3:

Here is the easy solution

input[type=text] {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
}

回答4:

Sometimes you can have a stylesheet there broke the appearance: none; so a way to fix it when that happens is to use caret. The best way will be to rewrite your code and find out what's part of your code there mess up the style for none

Before using caret you need to know that it can get you some trouble with other styles

-webkit-appearance: caret;
   -moz-appearance: caret;
     -o-appearance: caret;
        appearance: caret;

NOTE: Use none, caret is not the optimal.

回答5:

https://stackoverflow.com/a/51626446/9287284

background-clip: padding-box;

and I found an older same answers comment at here.

https://stackoverflow.com/a/29750016/9287284

回答6:

Setting either background and border css properties of the input tag also seems to work.

Try this:

<style>
input {
    background: #ccc;
    border: none;
}
</style>

<form>
First name: <input type="text"/><br />
Last name: <input type="text" />
</form>

来源：https://stackoverflow.com/questions/3062968/remove-textarea-inner-shadow-on-mobile-safari-iphone