Rendu bizarre du bouton de soumission CSS sur iPad / iPhone

222

J'ai remarqué que si je stylise mes boutons avec CSS en utilisant le rayon, les couleurs et les bordures, ils ont l'air bien mais dans l'iphone / ipad / ipod ils ont l'air terribles ... ne devrait pas être le même rendu que dans Safari Desktop ??

entrez la description de l'image ici

— Francesco
source

copie possible du style CSS pour les boutons de saisie sur iPad / iPhone

— Skolima

Réponses:

453

Oups! je viens de me trouver: il suffit d'ajouter cette ligne sur tout élément dont vous avez besoin

   -webkit-appearance: none;

— Francesco
source

je t'aime, stackoverflow et @Francesco

— jahrichie

Brillant, et voici un excellent article à ce sujet tiré des astuces CSS. Il répertorie tous les autres éléments modifiés par WebKit et Mozilla.

— Patrick

Compass a également un mix pour cela compass-style.org/reference/compass/css3/appearance

— Patrick Beeson

Je souhaite que j'aurais fait cette recherche google il y a 12 heures ... MERCI.

— Elly Post

Vraiment super! Je n'ai pas pensé que ce genre de problème se produisait également sur iOS! Encore une fois, merci beaucoup pour cela!

— Saurabh Prajapati

Ajoutez ce code dans le fichier css:

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

CA aidera.

— subindas pm
source

Génial! Le bouton d'

— envoi du

@peterkodermac, n'oubliez pas d'ajouter la classe CSS parent, sinon cela pourrait affecter chaque champ de saisie.

— subindas pm

La réponse ci-dessus pour l'apparence du webkit a fait la magie, mais le bouton avait toujours l'air plutôt pâle / terne par rapport au navigateur sur d'autres appareils / bureau. J'ai également dû définir l'opacité sur pleine (plage de 0 à 1)

-webkit-appearance:none;
opactiy: 1

Après avoir défini l'opacité, le bouton était le même sur tous les différents appareils / émulateur / bureau.

— Priyank Thakkar
source