Supprimer l'ombre d'entrée iOS

Sur iOS (Safari 5), je dois suivre pour l'élément d'entrée (ombre intérieure supérieure):

Je veux supprimer l'ombre supérieure, le bogue -webkit-appearancene s'enregistre pas.

Le style actuel est:

input {    
    border-radius: 15px;
    border: 1px dashed #BBB;
    padding: 10px;
    line-height: 20px;
    text-align: center;
    background: transparent;
    outline: none;    
    -webkit-appearance: none;
    -moz-appearance: none;
}

Vous devrez utiliser -webkit-appearance: none;pour remplacer les styles IOS par défaut. Cependant, sélectionner uniquement la inputbalise dans CSS ne remplacera pas les styles IOS par défaut, car IOS ajoute ses styles à l'aide d'un sélecteur d'attribut input[type=text]. Par conséquent, votre CSS devra utiliser un sélecteur d'attribut pour remplacer les styles CSS IOS par défaut qui ont été prédéfinis.

Essaye ça:

input[type=text] {   
    /* Remove First */
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;

    /* Then Style */
    border-radius: 15px;
    border: 1px dashed #BBB;
    padding: 10px;
    line-height: 20px;
    text-align: center;
    background: transparent;
    outline: none;    
}

Liens utiles:

Vous pouvez en savoir plus appearanceici:

http://css-tricks.com/almanac/properties/a/appearance/

Si vous souhaitez en savoir plus sur les sélecteurs d'attributs CSS, vous pouvez trouver un article très instructif ici:

http://css-tricks.com/attribute-selectors/

background-clip: padding-box;

Semble également supprimer les ombres.

Comme @davidpauljunior l'a mentionné; soyez prudent lors du réglage -webkit-appearancesur un sélecteur d'entrée général.

webkit supprimera toutes les propriétés

-webkit-appearance: none;

Essayez d'utiliser la propriété box-shadow pour supprimer l'ombre sur votre élément d'entrée

box-shadow: none !important;

J'ai essayé de trouver une solution qui a.) Fonctionne et b.) Je suis capable de comprendre pourquoi cela fonctionne .

Je sais que l'ombre des entrées (et la bordure arrondie des entrées [type = "search"]) provient d'une image d'arrière-plan.

Donc, évidemment, le réglage background-image: noneétait ma première tentative, mais cela ne semble pas fonctionner.

Le réglage background-image: url()fonctionne, mais je suis toujours préoccupé par le fait d'avoir un vide url(). Bien que ce ne soit actuellement qu'un mauvais pressentiment.

background-clip: padding-box; semble faire le travail aussi, mais même après avoir lu la documentation "background-clip", je ne comprends pas pourquoi cela supprime complètement l'arrière-plan.

Ma solution préférée:

background-image: linear-gradient(transparent, transparent);

C'est un css valide et je comprends comment cela fonctionne.

Bien que la réponse acceptée soit un bon début, comme d'autres l'ont souligné, elle ne fonctionne que pour les intrants dont typeest "text". Il existe une myriade d'autres types d'entrée qui s'affichent également sous forme de zones de texte sur iOS, et nous devons donc développer cette règle pour prendre en compte ces autres types.

Voici le CSS que j'utilise pour débarrasser les champs de texte d'entrée et les zones de texte de l'ombre intérieure, tout en préservant le style par défaut pour les boutons, les cases à cocher, les curseurs de plage, les listes déroulantes de date / heure et les boutons radio, qui sont tous créés à l'aide de la <input>balise humble également .

textarea,
input:matches(
  [type="email"],
  [type="number"],
  [type="password"],
  [type="search"],
  [type="tel"],
  [type="text"],
  [type="url"]
) {
  -webkit-appearance: none;
}

Cela fonctionne mieux pour moi. De plus, cela signifie que je n'ai pas à l'appliquer à chaque type d'entrée (par exemple, texte, tél, e-mail, etc.).

* {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
}