Supprimer l'ombre interne de la zone de texte sur Mobile Safari (iPhone)

152

Par défaut, il semble que Mobile Safari ajoute l'ombre intérieure supérieure à tous les champs de saisie, y compris la zone de texte. Y a-t-il un moyen de l'enlever?

C'est particulièrement moche quand on a un fond blanc.

iphone mobile mobile-safari

— Lyon
source

340

En ajoutant ce style css:

-webkit-appearance: none;

— Lyon
source

26

soyez prudent lorsque vous ajoutez cette propriété aux sélecteurs de case à cocher et de bouton radio du type d'entrée, car elle masque les cases à cocher et les boutons radio;)

— Zain Shaikh

14

Merci pour la réponse Lyon. Btw, la meilleure façon de l'utiliser est de l'appliquer uniquement à textarea, input[type="text"], input[type="submit"].

— jgthms

8

N'oubliez pas non input[type="password"]plus.

— Nick Pyett

7

N'oubliez pas non [type="email"]plus!

— Willster

35

Peut-être plus facile d'utiliser l'opérateur not selon les types d'entrée que vous utilisez:input:not([type=checkbox]):not([type=radio])

— Justin Fisher

30

Lors de l'ajout du style CSS

-webkit-appearance: none;

fonctionnera, il se débarrasse de tout. Vous voudrez peut-être essayer ceci à la place:

box-shadow: none !important;

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

— Justin Tolchin
source

6

L'ajout de la propriété box-shadow ne fonctionne pas. L'ombre intérieure apparaît toujours dans Safari sur iOS.

— silentmouth

22

Voici la solution simple

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

— IqbalBary
source

9

Parfois, vous pouvez avoir une feuille de style cassée, appearance: none;donc un moyen de le réparer lorsque cela se produit est de l'utiliser caret. Le meilleur moyen sera de réécrire votre code et de découvrir ce qui fait partie de votre code et de gâcher le style pournone

Avant de l'utiliser, caretvous devez savoir que cela peut vous causer des problèmes avec d'autres styles

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

REMARQUE: L' utilisation none, caretn'est pas optimale.

— TheCrazyProfessor
source

3

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

— KABA
source

-31

La définition des propriétés soit backgroundet bordercss de la inputbalise semble également fonctionner.

Essaye ça:

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

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

— MTS
source

9

Incorrect et trompeur. Veuillez tester votre code sur le bon appareil avant de publier ...

— Ariel

Vraiment mauvaise réponse, rien à ce sujet n'est ce que OP demande au sujet

— Jacta