Arrêter de Safari Mobile de donner des boutons d'entrée des coins arrondis

Je suppose que le sujet dit tout. J'ai une application web lors de l'affichage sur un Iphone, Ipod ou Ipad, entrée soumettre les boutons ont des coins arrondis. Est-il un moyen pour que cela cesse?

InformationsquelleAutor Newbie Fletcher | 2011-03-10
  1. 182

    Si vous ajoutez...

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

    Ensuite vos boutons héritera de tout les styles CSS que vous avez appliqué pour les autres navigateurs.

    • Cela ne fonctionne pas sur iPad2, iOS 5.1.1. Je ne peux pas être certain qu'il ne fonctionne pas sur les autres iOAS périphériques, bien que, depuis, je n'ai pas à le tester avec. Cependant, Roel du -webkit-border-radius:0px solution t de travail.
    • Si vous n'appliquez pas -webkit-appearance: none puis Safari devient pointilleux sur les propriétés qui peuvent être appliquées sur celui-ci (à savoir, font-size et color. La meilleure solution serait d'appliquer à la fois.
    • Déclaration pour confirmer que cette solution fonctionne pour iPad, iOS 5.1.1.
    • répondant à une de 2 ans commentaire.... oh bien. -webkit-appearance: none; les causes des cases à cocher pour ne pas être visible dans google Chrome. Probablement une incidence sur les autres éléments et les navigateurs aussi bien.
    • WOW!!! Nous étions à la recherche pendant des heures pour résoudre ce problème dans une application cordova et c'était la solution! Je ne peux pas upvote ce suffisant!!!
    • Cela vaut la peine de l'ajout de border-radius: 0;

    InformationsquelleAutor methodofaction
  2. 19

    N'a pas fonctionné pour moi, l'-webkit-appearance:none.

    Ce n':

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

    J'ai eu le même problème avec des coins arrondis sur un bouton avec l'image de fond, juste sur l'iPhone.

    • Confirmation: le plus voté réponse ici (par Duopixel) ne fonctionne pas, mais Roel la réponse ne. Ceci est probablement dû à un changement de mobile d'Apple webkit mise en œuvre dans les mois écoulés.
    • Tu veux dire que ça ne fonctionne pas pour vous. La solution a fonctionné pour moi - je l'ai juste mis en œuvre. Pas sûr de savoir pourquoi nous faisons l'expérience de différents résultats. Là encore, votre post a été fait plus de la moitié il ya un an donc je ne peux pas dire si vous ressentez toujours le même problème.
    • vous avez peut-être simplement de priorité des questions... ?
    InformationsquelleAutor Roel
  3. 11

    Vous pouvez essayer d'utiliser le code CSS suivant:

    -webkit-appearance:none;

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

    InformationsquelleAutor dthukka
  4. 5

    J'ai trouvé que sur l'iPad 2, vous devez utiliser la syntaxe suivante:

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

    dans votre classe button.

    InformationsquelleAutor Daniele F.
  5. 3

    J'avais un site avec un envoi d'entrée type="image". Cette vairation de la ci-dessus fixe les coins arrondis:

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

    J'ai trouvé que la mise background: linear-gradient(color1, color2) se débarrasser de l'excès de coins arrondis sur les appareils Apple et fonctionne sur tous les autres navigateurs/plates-formes que j'ai essayé.

    InformationsquelleAutor mait