Comment personnaliser le style des boutons de saisie sur les appareils iOS et surmonter l'apparence par défaut ?

Remplacer le style des boutons de saisie par défaut sur les appareils iOS

Le style des boutons de saisie avec CSS présente un défi unique sur les appareils iOS, car les styles par défaut du Mac remplacer les conceptions personnalisées. Pour résoudre ce problème, envisagez d'utiliser -webkit-apparence: none; propriété. Cette propriété vous permet d'éliminer le style Mac par défaut et d'appliquer votre CSS personnalisé à la place.

Options supplémentaires pour la personnalisation des boutons iOS

Au-delà de l'utilisation de -webkit-apparence : aucune ; , vous pouvez explorer des approches alternatives pour obtenir le style souhaité :

• Utilisez la propriété [-moz-apparence] : Pour Firefox et d'autres applications basées sur Mozilla navigateurs sur iOS, vous pouvez utiliser -moz-apparence : aucun ; pour obtenir le même effet que -webkit-apparance : none ;.
• Créer un lien hypertexte en tant que bouton de soumission : Pour contourner le problème, vous pouvez créer un élément de lien hypertexte qui se comporte comme un bouton de soumission . Ajoutez l'attribut suivant au champ balise : type="soumettre". Cela demandera au navigateur de soumettre le formulaire lorsque vous cliquez sur le lien, fournissant ainsi un élément de bouton personnalisé qui correspond au style souhaité.

/* Remove default iOS styling */
input[type="submit"] {
  -webkit-appearance: none;
  -moz-appearance: none;
}

/* Apply custom styling */
input[type="submit"] {
  background-color: #33b5e5;
  color: white;
  border: none;
  padding: 10px 15px;
  cursor: pointer;
  border-radius: 5px;
}