Supprimer l'ombre interne des zones de texte sur Mobile Safari (iPhone)

Question

Par défaut, il semble que Mobile Safari ajoute l'ombre interne supérieure à tous les champs de saisie, y compris les zones de texte. Existe-t-il un moyen de la supprimer ?

C'est particulièrement laid lorsque vous avez un fond blanc.

Answer 1

En ajoutant ce style css :

  appearance: none;
  -moz-appearance: none;
  -webkit-appearance: none;

Conformément à https://developer.mozilla.org/en-US/docs/Web/CSS/appearance

Answer 2

En ajoutant le style CSS

-webkit-appearance: none;

fonctionnera, il se débarrasse de tout. Vous pouvez essayer ceci à la place :

box-shadow: none !important;

De cette façon, vous gardez la flèche vers le bas.

Answer 3

Voici la solution facile

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

Answer 4

Parfois, vous pouvez avoir une feuille de style là cassé la appearance: none; donc une façon de le corriger lorsque cela se produit est d'utiliser caret . La meilleure façon de procéder est de réécrire votre code et de découvrir quelle partie de votre code perturbe le style de l'interface. none

Avant d'utiliser caret vous devez savoir que cela peut vous poser des problèmes avec d'autres styles

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

NOTE : Utilice none , caret n'est pas l'optimum.

Answer 5

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

background-clip: padding-box;

et j'ai trouvé un commentaire plus ancien sur les mêmes réponses ici.

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