HTML + CSSCases à cocher

Coche en deux traits

Le petit trait se dessine d’abord, puis le grand, comme une coche tracée à la main au stylo.

Réglages

16px
1x

Code

<label class="uv-ck2k"><input type="checkbox"><span class="bx"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3" stroke-linecap="round"><path class="p1" d="M5 12.5L10 17.5" pathLength="1"/><path class="p2" d="M10 17.5L19.5 7.5" pathLength="1"/></svg></span>Vérifié</label>

Prompt pour l’IA

Collez-le dans ChatGPT, Claude ou Cursor : le bloc sera adapté à votre projet avec ces réglages, même sans React.

Plus dans Cases à cocher

Où l’utiliser

Tracer la coche en deux temps lui donne un côté manuscrit qui convient aux listes que l’on prend au sérieux : les étapes d’accueil d’un nouvel outil, le « J’ai lu les consignes » avant un examen en ligne ou la liste avant départ d’une application de réservation. L’effet est soigné, pas spectaculaire. Une case à cocher manuscrite en CSS.

Comme la case est teintée légèrement et non remplie d’une couleur pleine, elle reste lisible sur une page chargée. Si votre couleur d’accent est très claire, foncez-la un peu pour garder du contraste.