web-dev-qa-db-ja.com

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

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

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

iphonemobilemobile-safari
145
Lyon

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

-webkit-appearance: none;
326
Lyon

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

-webkit-appearance: none;

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

box-shadow: none !important;

この方法で下矢印を維持します。

27
Justin Tolchin

これが簡単な解決策です

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

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

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

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

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

8
TheCrazyProfessor

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

background-clip: padding-box;

ここで古い同じ回答のコメントを見つけました。

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

2
Sika Uma