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
la source

Réponses:

340

En ajoutant ce style css:

-webkit-appearance: none;
Lyon
la 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
la 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
la 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
la 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
la 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