web-dev-qa-db-fra.com

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

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 convient pas du tout au 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 d'entrée et de les rendre rectangulaires comme prévu?

htmlcssiphonemobile-safaricss-reset
357
Alex

Sur iOS 5 et versions ultérieures, le bon vieux border-radius fait le tour:

input {
    border-radius: 0;
}

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

Sur les anciennes versions, vous deviez définir -webkit-appearance: none:

input {
    -webkit-appearance: none;
}
630
BoltClock

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

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

48
justadev

C'est le meilleur moyen de supprimer les arrondis 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 aura un problème sur notre sélection.

35
KoemsieLy

Le bouton radio de réponse acceptée a disparu sous Chrome. Cela marche:

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

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
}
7
Johansrk

Pour moi sur iOS 5.1.1 sur un iPhone 3GS, je devais effacer le style d'un champ de recherche et l'adapter au style souhaité

_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.

6
Chris Bernardi

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

Essayez d'ajouter input Css comme ceci:

 -webkit-appearance: none;
       border-radius: 0;
4
Ivin Raj

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

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

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 comme .foo, alors sachez que vous ne pouvez pas simplement faire .my-field { -webkit-appearance: none; }. Si vous n’avez pas de meilleur moyen d’atteindre la spécificité appropriée, cela vous aidera:

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

4
Henrik N

J'ai utilisé un simple rayon de bordure: 0; supprimer les coins arrondis pour les types de saisie de texte.

3
Jesse

Pour que les boutons soient correctement rendus sur Safari et les autres navigateurs, vous devez leur attribuer un style spécifique, en plus de ne pas définir l’apparence du kit Web, par exemple:

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