Désactiver l'arrondi des éléments d'entrée iPhone / Safari

376

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

Existe-t-il un moyen de demander à Safari (via CSS ou métadonnées) de ne pas arrondir les champs de saisie et de les rendre rectangulaires comme prévu?

html css iphone mobile-safari css-reset Alex
la source
1
Je me demande pourquoi AUCUNE réinitialisation CSS ne semble contenir cette règle CSS super facile. C'est braindead.
Toskan
1
J'ai en fait créé une réinitialisation CSS basée sur la réinitialisation css 2 d'eric meyer avec le css nécessaire supplémentaire que vous trouverez dans la réponse ici. Il est disponible sur github: github.com/Jossnaz/JossiCssReset
Toskan
1
Attention -webkit-appearance: none;, je pense qu'il vaut mieux limiter cette condition à la portée d'un élément d'entrée spécifique. Sinon, il peut masquer les éléments d'entrée radio si vous les avez sur la page.
quas

Réponses:

661

Sur iOS 5 et versions ultérieures:

input {
  border-radius: 0;
}

input[type="search"] {
  -webkit-appearance: none;
}

Si vous devez uniquement supprimer les coins arrondis sur iOS ou que, pour une raison quelconque, vous ne pouvez pas normaliser les coins arrondis sur toutes les plates-formes, utilisez input { -webkit-border-radius: 0; }plutôt la propriété, qui est toujours prise en charge. Bien sûr, notez qu'Apple peut choisir de supprimer la prise en charge de la propriété préfixée à tout moment, mais compte tenu de leurs autres fonctionnalités CSS spécifiques à la plate-forme, il est probable qu'ils la garderont.

Sur les versions héritées, vous avez dû définir à la -webkit-appearance: noneplace:

input {
    -webkit-appearance: none;
}
BoltClock
la source
1
À partir d'iOS 5, cela supprimera uniquement l'ombre intérieure. Vérifiez la réponse de Piyush pour supprimer également les coins arrondis.
Jonathan Freeland
6
-webkit-appearancen'a en fait rien à voir avec l'ombre intérieure et les coins arrondis. Ne l'utilisez pas juste pour ça. css-infos.net/property/-webkit-appearance
Rudie
14
"Si IOS veut des coins et des ombres arrondis, laissez les utilisateurs IOS les avoir": C'est complètement inacceptable dans ma situation, et probablement dans la plupart des autres aussi.
coredumperror
2
!! vous ne devez pas utiliser cette méthode, il semble que la case à cocher ne soit pas disponible Pour cette raison, de nombreux utilisateurs de mon site ne procèdent pas à l'accord de paiement. !!
synthresin
11
Pour <input type="search">iOS 10, j'avais encore besoin -webkit-appearance: none;.
Gabriel Smoljár
55

input -webkit-appearance: none; seul ne fonctionne pas.

Essayez d'ajouter -webkit-border-radius:0px;en plus.

justadev
la source
1
J'ai eu besoin d'ajouter l' -webkit-border-radiusattribut à <input type="text">pour supprimer les coins arrondis dans iOS 5.
Jonathan Freeland
Pas besoin d'ajouter de px après le 0
mintedsky
42

C'est le meilleur moyen de supprimer l'arrondi dans IOS.

textarea,
input[type="text"],
input[type="button"],
input[type="submit"] {
     -webkit-appearance: none;
     border-radius: 0;
}

Remarque: veuillez ne pas utiliser ce code pour l'option de sélection. Il y aura un problème sur notre sélection.

KoemsieLy
la source
2
J'ai trouvé que l'utilisation input[type]semble faire l'affaire pour toutes les entrées.
JacobTheDev
11

La réponse acceptée a fait disparaître le bouton radio sur Chrome. Cela marche:

input:not([type="radio"]):not([type="checkbox"]) {
    -webkit-appearance: none;
    border-radius: 0;
}
François Romain
la source
7

Voici la solution complète pour Compass (SCSS):

input {
  -webkit-appearance: none;  // remove shadow in iOS
  @include border-radius(0);  // remove border-radius in iOS
}
Johansrk
la source
14
Juste une note, le @include border-radius(0);mixin n'est disponible que si vous l'avez défini vous-même ou si vous utilisez le framework Compass, pas seulement vanilla SASS.
waffl
Juste une note, si vous utilisez SCSS, vous devriez probablement aussi utiliser le préfixe automatique.
Christian
6

Pour moi sur iOS 5.1.1 sur un iPhone 3GS, j'ai dû effacer le style d'un champ de recherche et le définir sur le style voulu

input[type="search"] {-webkit-appearance: none; border-radius: 0 3px 3px 0;}

Faire -webkit-border-radius: 0;seul n'a pas effacé le style natif. C'était aussi pour une vue Web sur une application native.

Chris Bernardi
la source
5

J'ai eu le même problème mais uniquement pour le bouton soumettre. Nécessaire pour supprimer l'ombre intérieure et les coins arrondis -

input[type="submit"] { -webkit-appearance:none; -webkit-border-radius:0; }
seanjacob
la source
4

Si vous utilisez normalize.css, cette feuille de style fera quelque chose comme input[type="search"] { -webkit-appearance: textfield; }.

Cela a une spécificité plus élevée qu'un sélecteur de classe unique .foo, alors sachez que vous ne pouvez pas faire juste .my-field { -webkit-appearance: none; }. Si vous n'avez pas de meilleur moyen d'atteindre la bonne spécificité, cela vous aidera:

.my-field { -webkit-appearance: none !important; }

Henrik N
la source
4

S'il vous plaît, essayez celui-la:

Essayez d'ajouter inputCss comme ceci:

 -webkit-appearance: none;
       border-radius: 0;
Ivin Raj
la source
3

J'ai utilisé un simple border-radius: 0; pour supprimer les coins arrondis des types de saisie de texte.

Jesse
la source
0

Afin de rendre les boutons correctement sur Safari et d'autres navigateurs, vous devrez donner un style spécifique aux boutons en plus de définir l'apparence du webkit sur aucun, par exemple:

border-radius: 0;
-webkit-appearance: none;
background-image: linear-gradient(to bottom, #e4e4e4, #f7f7f7);
border: 1px solid #afafaf
CpnCrunch
la source