Maison > interface Web > tutoriel CSS > Comment puis-je désactiver les éléments de saisie arrondis dans iPhone/Safari ?

Comment puis-je désactiver les éléments de saisie arrondis dans iPhone/Safari ?

Barbara Streisand
Libérer: 2024-10-30 16:16:26
original
369 Les gens l'ont consulté

How Can I Disable Rounded Input Elements in iPhone/Safari?

Désactivation des éléments de saisie arrondis dans iPhone/Safari

Safari sur les appareils iOS a tendance à afficher les champs de saisie de texte avec un style arrondi, ce qui peut ne pas être le cas alignez-vous toujours sur le design prévu. Pour résoudre ce problème, voici comment demander à Safari de ne pas arrondir les champs de saisie et de les rendre rectangulaires :

Pour iOS 5 et versions ultérieures :

1. Style CSS :

Utilisez la règle CSS border-radius : 0 ; pour supprimer les coins arrondis sur tous les champs de saisie.

2. Apparence WebKit :

Pour le champ de saisie de recherche en particulier, définissez la propriété -webkit-apparence sur none.

<code class="css">input {
  border-radius: 0;
}

input[type="search"] {
  -webkit-appearance: none;
}</code>
Copier après la connexion

Pour les anciennes versions de Safari :

Apparence WebKit :

Dans les anciennes versions de Safari, utilisez la propriété -webkit-apparence: none pour tous les champs de saisie afin de supprimer le style arrondi.

<code class="css">input {
  -webkit-appearance: none;
}</code>
Copier après la connexion

Remarque :

  • Le -webkit-border-radius : 0 ; La propriété peut être utilisée pour cibler les champs de saisie sur iOS uniquement, mais elle pourrait être progressivement supprimée à l'avenir.
  • La méthode préférée consiste à normaliser les coins arrondis sur toutes les plates-formes à l'aide de la propriété standard border-radius et du -webkit- propriété d'apparence pour Safari uniquement.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!

source:php.cn
Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Derniers articles par auteur
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal