Radios et cases personnalisées zéro tricot

De nombreux boutons de radio et cases personnalisés agrandissent et recolorent simplement les éléments standard. SurveyMonkey est un excellent exemple de cette approche, en utilisant de grandes options visuellement distinctes tout au long de son interface.

Fait intéressant, la réalisation de cette personnalisation de base nécessite souvent un CSS minimal. Augmenter simplement la taille et l'ajustement de la couleur peut suffire:

 entrée [type = "radio"],
entrée [type = "Checkbox"] {
  Largeur: 3em;
  hauteur: 3rem;
  Color accent: vert;
}

Ce code augmente efficacement la taille et applique une couleur d'accent vert. Cependant, des problèmes de compatibilité surviennent, en particulier du rendu de Safari. Bien que fonctionnel, la sortie visuelle diffère.

Pour les conceptions vraiment personnalisées qui surmontent les incohérences du navigateur, les ressources de Stephanie Eckles sont inestimables:

• Boutons radio de style personnalisé Pure CSS
• Style à cocher personnalisé Pure CSS

Sur une note connexe, les commandes d'interface utilisateur sont essentiellement des boutons radio améliorés. Cependant, une bascule de curseur indigène dédiée n'est pas disponible, comme le souligne le travail de Michelle Barker.

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!