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

iphone css ipad mobile-safari mobile-webkit Francesco
la 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
la 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
la 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
la source