Parcours de la tâche / de l'entrée au résultat
Comment concevoir une case à cocher CSS personnalisée
- 01
Définissez la taille du contrôle
Ces instructions concernent le préréglage de base ; les modèles de la galerie ont leurs propres formes, couleurs, balisage et durées : Le symbole se dimensionne à partir de l'espace intérieur à la bordure, et non de la taille extérieure. L'aperçu et l'export utilisent la même forme de bordure CSS. Cliquez sur l'aperçu ou placez le focus dessus et appuyez sur Espace pour basculer son état coché natif. 24 Modèles · Coché · Couleur
- 02
Façonnez le cadre
Utilisez un contrôle de 18 à 64 px et une bordure de 1 à 8 px. Au moins 8 px doivent rester à l'intérieur de la bordure pour le symbole. Les combinaisons invalides effacent l'aperçu et désactivent l'export.
- 03
Choisissez les couleurs d'état
Ces instructions concernent le préréglage de base ; les modèles de la galerie ont leurs propres formes, couleurs, balisage et durées : Choisissez la Couleur de bordure pour le contour au repos et la Couleur cochée pour l'état rempli. Gardez la Couleur cochée suffisamment foncée pour contraster avec le symbole blanc qu'elle accueille, car le symbole lui-même est toujours blanc.
- 04
Prévisualisez les deux états
Ces instructions concernent le préréglage de base ; les modèles de la galerie ont leurs propres formes, couleurs, balisage et durées : Basculez Afficher l'état coché pour comparer les aspects au repos et rempli dans l'aperçu en direct. Le symbole apparaît en 160 ms avec un léger agrandissement — exactement le mouvement que le CSS exporté reproduit entre les états.
- 05
Copiez ou téléchargez le CSS
Cliquez sur Copier le CSS ou Télécharger le .css pour enregistrer toolars-checkbox.css. La règle conserve un vrai input en dessous — appearance: none ne fait que le repeindre — et les états :focus-visible et :disabled sont inclus dans l'export.
- 06
Gardez un balisage natif
Appliquez la classe .checkbox directement à un vrai élément input et associez-le à un label comme pour toute case à cocher. Le focus clavier, le comportement au clic et les annonces des technologies d'assistance continuent de fonctionner car rien de sémantique n'est remplacé. Le fond blanc au repos fait partie de la règle, donc l'état vide reste lisible sur les surfaces teintées. Le HTML inclut le CSS actuel et un exemple fonctionnel. Les contrôles natifs acceptent le clavier.