web-dev-qa-db-fra.com

Empêchez Safari Mobile de donner des coins arrondis aux boutons de saisie

Je suppose que le sujet dit tout. J'ai une application Web affichée sur un iPhone, un iPod ou un iPad, les boutons de saisie des entrées ont des coins arrondis. Y at-il un moyen d'arrêter cela?

iosmobile-safari
78
Newbie Fletcher

Si vous ajoutez ...

input, textarea {
  -webkit-appearance: none;
  -webkit-border-radius: 0;
}

Ensuite, vos boutons hériteront des styles CSS que vous avez appliqués à d'autres navigateurs.

181
methodofaction

Cela n'a pas fonctionné pour moi, l'apparence de -webkit: aucune.

Cela fait:

input[type=submit] {
    -webkit-border-radius:0px;
}

J'ai eu le même problème avec les coins arrondis sur un bouton avec une image d'arrière-plan, juste sur l'iPhone.

19
Roel

Vous pouvez essayer d'utiliser les CSS suivants:

-webkit-appearance:none;

Plus d'infos: http://trentwalton.com/2010/07/14/css-webkit-appearance/

11
dthukka

J'ai trouvé que sur iPad 2, vous devez utiliser les éléments suivants:

-webkit-appearance:none;
border-radius: 0;

dans votre classe de bouton.

5
Daniele F.

J'ai eu un site avec une entrée submit type = "image". Cette variation de ce qui précède fixe les coins arrondis:

input[type=image] {
    -webkit-border-radius:0px;
}
3
RevConcept

J'ai constaté que la configuration de background: linear-gradient(color1, color2) supprime les coins trop arrondis des périphériques Apple) et fonctionne sur tous les autres navigateurs/plates-formes que j'ai essayés.

0
mait