Checkbox Animated
Case à cocher en CSS seul : le carré à bord indigo se remplit et une coche blanche grandit en 0,2 s, sur une vraie case native utilisable au clavier.
Mis à jour le
Cet effet fait partie d'Effect.Labs — 840 effets vanilla, une partie gratuite, une partie premium. Formulaires comprend 20 effets, dont 2 gratuits. Découvrir la catégorie →
3 exemples d'usage
Comment ça marche
Le bloc est un <label class="cbx-check"> qui contient trois choses : la vraie case <input type="checkbox">, le carré dessiné .cbx-box et le texte. La vraie case est rendue invisible (opacity: 0) mais reste posée exactement sous le carré, à sa taille : elle reçoit les clics, le focus et l'état coché, et le formulaire l'envoie avec son name et sa value. Un clic n'importe où sur le texte coche aussi, puisque tout est dans le label.
Le dessin suit l'état natif par le sélecteur input:checked + .cbx-box. Le carré de 24 px, bord de 2 px #6366f1, prend un fond indigo (transition de 0,3 s). La coche est le pseudo-élément ::after : un rectangle de 6 × 12 px dont seules les bordures droite et basse sont tracées, tourné de 45°. Au repos il est à scale(0) ; coché, il passe à scale(1) en 0,2 s : la coche grandit depuis son centre.
Aucun JavaScript. Les classes sont préfixées cbx- et la racine .fx-0294-root (fond sombre, 300 px de haut) n'est qu'un cadre de présentation : dans un vrai formulaire, retirez son min-height et son fond, le texte prend alors la couleur de votre page.
Accessibilité
- Vraie case : l'élément natif reste dans la page (ni
display:nonenivisibility:hidden) : Tab l'atteint, Espace la coche, un lecteur d'écran annonce « case à cocher, Accepter les conditions, non cochée ». - Focus visible : au focus clavier, un anneau clair
#a5b4fcse dessine autour du carré (input:focus-visible + .cbx-box). - Zone de clic : toute la ligne (carré + texte) est cliquable et touchable, pas seulement les 24 px du carré.
- Mouvement réduit : sous
prefers-reduced-motion: reduce, le remplissage et la coche apparaissent sans transition. - Obligatoire : pour une case à accepter avant envoi, ajoutez
requiredsur l'input : le navigateur bloque l'envoi et affiche son propre message.
Compatibilité navigateur
CSS seul : :checked, sélecteur d'adjacence, pseudo-élément et transform. Mesuré dans Chromium 151, Firefox 153 et WebKit 26.5 (Playwright) : deux copies indépendantes, Tab puis Espace, toucher à 390 px, mouvement réduit. L'anneau de focus demande :focus-visible (Chrome 86, Firefox 85, Safari 15.4).
Navigateurs plus anciens : la case se coche et s'anime, seul l'anneau de focus clavier manque.
Le code
Structure HTML à coller dans votre page (le CSS + JS sont inclus avec votre achat) :
<div class="fx-0294-root">
<label class="cbx-check">
<input type="checkbox" name="conditions" value="oui">
<span class="cbx-box" aria-hidden="true"></span>
<span class="cbx-text">Accepter les conditions</span>
</label>
</div>Paiement unique, sans abonnement — le code est à toi pour toujours
Personnaliser
Options passées à l'API ou attributs data-* :
| Option / propriété | Défaut | Effet |
|---|---|---|
Couleur (CSS — border de .cbx-box et fond de input:checked + .cbx-box) |
#6366f1 | Changez les deux pour garder un carré cohérent coché et non coché. |
Taille du carré (CSS — width / height de .cbx-box et de l'input) |
24px | Pour 20 px, décalez aussi la coche (left / top de ::after) et donnez la même taille à l'input invisible. |
Vitesse de la coche (CSS — transition de .cbx-box::after) |
transform .2s | Allongez à .35s pour une coche plus visible. |
Forme (CSS — border-radius de .cbx-box) |
6px | 50% donne une case ronde, 2px un carré plus strict. |
Cadre de démo (CSS — .fx-0294-root) |
min-height 300px, fond #0a0a0f, texte blanc | Retirez ces trois réglages pour poser la case dans votre formulaire : le texte prend la couleur de la page. |
Nom envoyé (HTML — name et value) |
conditions = oui | Ce que reçoit votre serveur quand la case est cochée ; rien n'est envoyé si elle ne l'est pas. |
FAQ
name et sa value partent avec le formulaire comme une case normale.input.indeterminate = true en JavaScript et ajoutez une règle input:indeterminate + .cbx-box qui dessine un trait au lieu de la coche.<label class="cbx-check"> autant de fois que nécessaire dans la racine ; chaque case a son propre état.
