Aller au contenu
Toolars
Explorer
Signaler un bug

Design · utilitaire Local

Générateur de cases à cocher CSS

CSS Checkbox Generator

Stylez une case à cocher native : taille, bordure et couleurs d'état réglables, avec états :focus-visible et :disabled dans le CSS exporté, sans JavaScript.

Parcours de la tâche / de l'entrée au résultat

Définissez la taille du contrôle

S'exécute en local · Rien n'est téléversé

Fonctionnement de Générateur de cases à cocher CSS, confidentialité et outils associés

Parcours de la tâche / de l'entrée au résultat

Comment concevoir une case à cocher CSS personnalisée

  1. 01

    Définissez la taille du contrôle

    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.

  2. 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.

  3. 03

    Choisissez les couleurs d'état

    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.

  4. 04

    Prévisualisez les deux états

    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.

  5. 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.

  6. 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.

Fiche de l'outil

Traitement
Dans votre navigateur
L'entrée quitte cet appareil
Jamais
Conservation
Rien n'est stocké
Prix
Gratuit

Vos données restent dans le navigateur.

Générateur de cases à cocher CSS utilise son chemin d'exécution local vérifié et ne crée aucun historique caché des entrées ou sorties.

Exécution locale

S'exécute dans l'onglet actuel du navigateur.

Aucun traitement caché

Les données actives de l'outil ne deviennent jamais un enregistrement de document Toolars.

Aucun compte requis

Utilisez le workflow principal sans créer de profil. Les favoris se synchronisent avec votre compte après connexion.

Réinitialisation immédiate

Effacez l'onglet et les données de travail actives disparaissent.

Ce que Générateur de cases à cocher CSS fait vraiment

Une page de paramètres pleine de cases à cocher par défaut paraît inachevée, et un design system a besoin du même contrôle dans chaque formulaire sans ajouter de dépendance JavaScript. Comme le CSS exporté conserve un véritable élément input, le focus clavier et les annonces des lecteurs d'écran continuent de fonctionner — tandis que les couleurs de marque à l'essai ne quittent jamais l'onglet du navigateur. Un rapide basculement de l'aperçu confirme les deux facettes de l'interaction avant que le moindre code soit copié. La même règle sert un formulaire unique ou toute une bibliothèque de composants.

Questions fréquentes

La case à cocher reste-t-elle accessible ?
Oui. Le balisage reste un véritable élément input ; appearance: none ne remplace que son rendu. L'export inclut un contour :focus-visible de 3 px dans votre couleur d'accent et un état :disabled atténué, et l'état coché reste celui que les technologies d'assistance annoncent nativement.
Pourquoi ma bordure a-t-elle été rejetée ?
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.
Comment le symbole de coche est-il dimensionné ?
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.
Que se passe-t-il quand la case change d'état ?
Le symbole passe de zéro à sa pleine taille par une transition de transformation de 160 ms pendant que le fond se remplit de votre Couleur cochée. Sous prefers-reduced-motion, la transition est supprimée et l'état bascule simplement, donc rien ne s'anime pour les utilisateurs sensibles au mouvement.
Qu'est-ce qui est fixe dans l'export et que puis-je modifier ?
Le fond au repos et le symbole sont toujours blancs, donc choisissez une Couleur cochée avec un contraste suffisant vis-à-vis du blanc. Le contour de focus de 3 px, son décalage et l'état :disabled à mi-opacité sont des valeurs fixes que vous pouvez modifier librement après avoir collé la règle.
Quelque chose est-il téléversé ?
Non. Tout est rendu localement dans l'onglet actuel, aucun compte n'est requis, et aucune valeur n'entre dans le stockage, les journaux ou le réseau. Cliquez sur Réinitialiser pour revenir aux valeurs par défaut.

Continuer dans Design

Des tâches associées, pas une impasse.

Passez à un autre espace de travail ciblé sans revenir à l'index complet.

Générateur d'animations de chargement CSS

CSS Loader Generator

Réglez un anneau orbital ou trois points rebondissants — cadre, trait, vitesse et couleurs — et copiez le CSS animé avec bloc prefers-reduced-motion inclus.

Créer

Générateur d'interrupteurs CSS

CSS Switch Generator

Concevez un interrupteur en pur CSS — piste, curseur et course calculés — avec focus clavier et mouvement réduit gérés dans le code copié, sans JavaScript.

Créer

Générateur de clip-path CSS

CSS Clip Path Generator

Modifiez les sommets par glissement, au clavier ou par coordonnées. Quatre formes de départ, copie locale de clip-path ou du CSS complet.

Créer

Générateur de motifs de fond CSS

CSS Background Pattern Generator

Composez des motifs de fond en dégradés CSS — points, grille ou diagonale — sans fichier image : trois déclarations à coller, tuile et couleurs réglables.

Créer