web-dev-qa-db-fra.com

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):

example

Je veux supprimer l'ombre du haut, le bogue -webkit-appearance n'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;
}
ioscssinput
55
WHITECOLOR

Vous devrez utiliser -webkit-appearance: none; pour remplacer les styles IOS par défaut. Toutefois, le fait de sélectionner uniquement la balise input dans CSS ne remplacera pas les styles IOS par défaut, car IOS ajoute ses styles à l'aide d'un sélecteur d'attributs input[type=text]. Par conséquent, votre CSS devra utiliser un sélecteur d'attribut pour remplacer les styles CSS IOS par défaut 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 sur appearance ici: _

_ {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 informatif ici:

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

136
Mastrianni
background-clip: padding-box;

Semble supprimer les ombres aussi.

Comme @davidpauljunior mentionné; soyez prudent en réglant -webkit-appearance sur un sélecteur d’entrée général.

23
jstnrs

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 input.

box-shadow: none !important;
5
ShinyJos

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 pour les entrées (et la bordure arrondie pour l'entrée [type = "search"]) provient d'une image d'arrière-plan. 

Il est donc évident que régler background-image: none a été ma première tentative, mais cela ne semble pas fonctionner.

La définition de background-image: url() fonctionne, mais je suis toujours préoccupé par le fait que url() soit vide. Bien que ce soit actuellement un mauvais pressentiment.

background-clip: padding-box; semble faire aussi l'affaire, 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 valide css et je comprends comment ça marche.

1
Andreas Riedmüller