Maison > interface Web > tutoriel CSS > Comment supprimer les coins arrondis des champs de saisie dans iPhone/Safari ?

Comment supprimer les coins arrondis des champs de saisie dans iPhone/Safari ?

Barbara Streisand
Libérer: 2024-10-30 21:54:02
original
1109 Les gens l'ont consulté

How to Remove Rounded Corners from Input Fields in iPhone/Safari?

Élimination de l'arrondi des éléments de saisie iPhone/Safari

Les champs de saisie présentent généralement une apparence arrondie dans le navigateur iPhone/Safari, en conflit avec l'apparence souhaitée. conception rectangulaire. Cet article examine les méthodes permettant de modifier le style de l'élément d'entrée via CSS ou des métadonnées.

Solution pour iOS 5 et versions ultérieures :

Pour supprimer les coins arrondis sur iOS 5 et versions ultérieures , implémentez le CSS suivant :

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

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

Méthode alternative :

Pour la suppression spécifique à iOS des coins arrondis, ou dans les cas où la normalisation multiplateforme n'est pas réalisable , considérez le CSS suivant :

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

Cependant, notez que la prise en charge de propriétés préfixées comme celle-ci pourrait être interrompue à l'avenir.

Solution de navigateur héritée :

Pour les anciennes versions d'iOS, il était nécessaire d'utiliser la propriété -webkit-apparence :

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

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!

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