CodeKitHubEn quoi consiste cet outil ?
Les cases à cocher par défaut du navigateur n'ont pas le même aspect d'un navigateur à l'autre et sont difficiles à styliser directement, puisque leur apparence est dessinée par le système d'exploitation plutôt que par du CSS classique. La solution habituelle consiste à masquer visuellement la case native et à styliser un élément frère à sa place, piloté par l'état :checked de la case — l'input reste entièrement fonctionnel et accessible, seule son apparence change.
Cet outil construit ce modèle pour trois styles courants : une case arrondie avec une coche animée, un interrupteur coulissant façon iOS, et un cercle plein (façon bouton radio). Cliquez sur la case dans l'aperçu pour voir l'état coché, ajustez taille et couleur d'accent, puis copiez le CSS.
Source : Selectors Level 4, W3C — la spécification définissant la pseudo-classe :checked sur laquelle repose cette technique.
Pourquoi l'utiliser ?
- Aperçu en direct et cliquable — activez la case pour voir exactement à quoi ressemblent les états coché et non coché.
- Trois styles distincts et couramment utilisés dans un seul outil : case à coche, interrupteur, cercle plein.
- L'élément sous-jacent reste un vrai <input type="checkbox">, donc la navigation clavier, l'envoi de formulaire et les lecteurs d'écran continuent de fonctionner normalement.
- Taille et couleur d'accent ajustables, générées directement dans les valeurs CSS plutôt que laissées comme variables à remplir.
- Aucune police d'icônes, fichier SVG ou image nécessaire — la coche et le curseur sont dessinés avec de simples bordures et pseudo-éléments CSS.
- Gratuit, fonctionne dans votre navigateur, sans inscription.
Mode d'emploi
- Choisissez un style : coche arrondie, interrupteur coulissant ou cercle plein.
- Faites glisser le curseur de taille pour agrandir ou réduire la case.
- Choisissez une couleur d'accent — elle devient la couleur de fond et de bordure de l'état coché.
- Cliquez sur la case dans le panneau d'aperçu pour vérifier que les états coché et non coché sont corrects.
- Copiez le CSS généré dans votre feuille de style et utilisez-le sur n'importe quel <input type="checkbox"> entouré de la même structure que dans l'aperçu.
Exemple
Entrée
Style : coche arrondie · Taille : 24px · Couleur : orangeRésultat
.css-checkbox .mark {
width: 24px;
height: 24px;
border: 2px solid #f97316;
border-radius: 5px;
}
.css-checkbox input:checked + .mark {
background: #f97316;
}L'input de la case est masqué visuellement ; la case visible est un <span> frère stylisé selon l'état :checked de l'input, avec une petite bordure pivotée dessinée comme coche une fois cochée.
Pourquoi masquer la case native plutôt que la supprimer
Il est tentant de se passer du véritable <input> et de construire une case à cocher uniquement avec un <div> stylisé et un gestionnaire de clic, mais cela fait perdre gratuitement le support clavier, l'envoi de formulaire et la sémantique pour les lecteurs d'écran. Le modèle généré par cet outil conserve le véritable input dans le balisage — simplement masqué visuellement avec opacity: 0 et repositionné — le navigateur continue donc de le traiter comme une vraie case à cocher pour tout ce qui compte, tandis qu'un élément frère gère le style visible.
Les trois styles en un coup d'œil
- Coche arrondie : le modèle classique carré-avec-coche, le plus courant pour les champs de formulaire, les cases d'acceptation de conditions et les listes à sélection multiple.
- Interrupteur coulissant : perçu comme un réglage marche/arrêt instantané plutôt qu'un champ de formulaire — mieux adapté aux écrans de préférences qu'aux listes de cases à cocher.
- Cercle plein : un aspect minimaliste, proche d'un bouton radio, utile quand une case carrée semble trop lourde à côté d'éléments d'interface arrondis.
L'assortir au reste de votre interface
La couleur d'accent générée n'affecte que l'état coché — choisissez la couleur de votre marque ou de vos boutons pour que la case reste cohérente avec le reste de la page. Associez-la au même border-radius utilisé ailleurs dans l'interface pour un rendu plus homogène.
Foire aux questions
La case à cocher stylisée reste-t-elle accessible ?
Oui — l'élément sous-jacent reste un vrai <input type="checkbox">, seulement masqué visuellement plutôt que supprimé. Il reçoit toujours le focus, répond au clavier (espace pour cocher/décocher), et les lecteurs d'écran l'annoncent correctement, puisqu'ils lisent l'élément input et non le span stylisé à côté.
Pourquoi le CSS utilise-t-il un sélecteur frère comme input:checked + .mark ?
Parce que la case visible est un élément distinct de l'input réel, le CSS a besoin d'un moyen de styliser ce frère selon l'état de l'input. Le combinateur + sélectionne l'élément immédiatement après l'input coché, la technique standard pour construire des styles de case à cocher ou de bouton radio personnalisés sans JavaScript.
Puis-je l'utiliser dans un vrai formulaire, pas seulement une démo ?
Oui — copiez le CSS généré et entourez un vrai input de case à cocher de formulaire avec la même structure que celle affichée dans le HTML/aperçu. Restant une case native, elle est envoyée avec le formulaire exactement comme une case sans style, et fonctionne avec votre logique de validation existante.
Pourquoi la coche est-elle animée dans le style arrondi ?
Une courte animation d'agrandissement sur la coche rend l'état coché plus intentionnel et réactif qu'une apparition/disparition instantanée, un motif courant dans les cases à cocher d'interfaces soignées. C'est une petite règle @keyframes CSS incluse avec le reste du code généré.
Le style interrupteur nécessite-t-il un HTML différent ?
Non — les trois styles utilisent le même balisage sous-jacent (un input de case masqué plus un élément frère pour la forme visible). Changer de style dans cet outil ne modifie que les règles CSS appliquées à cette même structure, vous pouvez donc changer de style plus tard sans toucher à votre HTML.