Éteignez l’iPhone/Safari élément input arrondi

Question

Mon site Web rend bien sur le navigateur de l’iPhone/Safari, à une exception près : mon champs de saisie de texte ont un style arrondi bizarre qui ne semble pas bon du tout avec le reste de mon site.

Y a-t-il une façon d’indiquer de Safari (via CSS ou métadonnées) pas à arrondir les champs de saisie et de les rendre rectangulaire comme prévu ?

Answer 1

La façon la plus simple consisterait à fixer -webkit-appearance de none:

input {
    -webkit-appearance: none;
}

Comme souligné par d'autres, cela ne supprime plus les coins arrondis dans Safari sur iOS 5. Ces coins sont maintenant contrôlés par good ol' border-radius:

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

Si vous ne devez supprimer les coins arrondis sur iOS ou autre, pour une raison quelconque ne peut pas normaliser les coins arrondis sur les plates-formes, utilisez le préfixe -webkit-border-radius de la propriété au lieu de cela, ce qui est toujours pris en charge.

Answer 2

``seul ne fonctionne pas.

Essayez d’ajouter `` de plus.

Answer 3

C’est le meilleur moyen d’enlever l’arrondi en IOS.

Remarque : Veuillez ne pas utiliser ce code pour l’Option sélectionner. Il aura de problème sur notre sélection.

Answer 4

Voici la solution complète pour les compas (SCSS) :

Answer 5

Pour moi sur iOS 5.1.1 sur un iPhone 3GS que j’ai dû effacer le style d’un champ de recherche et de l’ensemble pour le style destiné

Faire `` seul ne pas clairement le style indigène. C’était aussi pour un affichage Web sur une application native.