Mobile Safari（iPhone）のtextarea inner shadowを削除する

デフォルトでは、Mobile Safariは、textareaを含むすべての入力フィールドに上部の内側の影を追加するようです。それを削除する方法はありますか？

背景が白の場合は特に醜いです。

このCSSスタイルを追加することにより：

-webkit-appearance: none;

CSSスタイルを追加しながら

-webkit-appearance: none;

動作し、それはすべてを取り除きます。代わりにこれを試してください：

box-shadow: none !important;

このようにして、下矢印を保持します。

これが簡単な解決策です

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

時々あなたはそこでスタイルシートを壊すことができるappearance: none;ので、それが起こったときにそれを修正する方法は使用することcaretです。最良の方法は、コードを書き直して、コードのどの部分がスタイルを台無しにするかを見つけることですnone

使用caretする前に、他のスタイルで問題が発生する可能性があることを知っておく必要があります

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

注：を使用することは最適noneでcaretはありません。

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

background-clip: padding-box;

そして、私はここに古い同じ回答のコメントを見つけました。

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

タグのいずれかbackgroundとbordercssプロパティの設定inputも機能しているようです。

これを試して：

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

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