Generatore di Checkbox CSS

Che cos'è questo strumento?

Le checkbox predefinite del browser hanno un aspetto diverso in ogni browser e sono difficili da restilizzare direttamente, perché il loro aspetto è disegnato dal sistema operativo e non dal semplice CSS. La soluzione standard è nascondere visivamente la checkbox nativa e stilizzare al suo posto un elemento fratello, guidato dallo stato :checked della checkbox — l'input rimane completamente funzionante e accessibile, cambia solo l'aspetto.

Questo strumento costruisce questo pattern per tre stili comuni: una casella arrotondata con segno di spunta animato, un interruttore a scorrimento in stile iOS, e un cerchio pieno (simile a un radio button). Clicca sulla checkbox nell'anteprima per vedere lo stato selezionato, regola dimensione e colore accento, poi copia il CSS.

Fonte: Selectors Level 4, W3C — la specifica che definisce la pseudo-classe :checked su cui si basa questa tecnica.

Perché usarlo?

• Anteprima dal vivo e cliccabile — attiva la checkbox per vedere esattamente come appaiono gli stati selezionato e non selezionato.
• Tre stili distinti e molto usati in un solo strumento: casella con spunta, interruttore e cerchio pieno.
• L'elemento sottostante resta un vero <input type="checkbox">, quindi navigazione da tastiera, invio del modulo e screen reader continuano a funzionare normalmente.
• Dimensione e colore accento regolabili, generati direttamente nei valori CSS invece di essere lasciati come variabili da compilare.
• Non serve nessun font di icone, file SVG o immagine — il segno di spunta e il pulsante sono disegnati con semplici bordi CSS e pseudo-elementi.
• Gratis, funziona nel browser, senza registrazione.

Come si usa

1. Scegli uno stile: segno di spunta arrotondato, interruttore a scorrimento o cerchio pieno.
2. Trascina il cursore della dimensione per ingrandire o rimpicciolire la checkbox.
3. Scegli un colore accento — diventa il colore di sfondo e bordo dello stato selezionato.
4. Clicca sulla checkbox nel pannello di anteprima per confermare che entrambi gli stati, selezionato e non selezionato, siano corretti.
5. Copia il CSS generato nel tuo foglio di stile e usalo su qualsiasi <input type="checkbox"> racchiuso nella stessa struttura del markup di anteprima.

Esempio

Input

Stile: segno di spunta arrotondato · Dimensione: 24px · Colore: arancione

Risultato

.css-checkbox .mark {
  width: 24px;
  height: 24px;
  border: 2px solid #f97316;
  border-radius: 5px;
}

.css-checkbox input:checked + .mark {
  background: #f97316;
}

L'input della checkbox è nascosto visivamente; la casella visibile è uno <span> fratello stilizzato in base allo stato :checked dell'input, con un piccolo bordo ruotato disegnato come segno di spunta una volta selezionato.

Perché nascondere la checkbox nativa invece di rimuoverla

È allettante saltare il vero <input> e costruire una checkbox solo con un <div> stilizzato con un gestore di click, ma così facendo si perdono gratuitamente il supporto da tastiera, l'invio del modulo e la semantica per gli screen reader. Il pattern generato da questo strumento mantiene il vero input checkbox nel markup — solo nascosto visivamente con opacity: 0 e riposizionato — così il browser continua a trattarlo come una vera checkbox in tutto ciò che conta, mentre un elemento fratello si occupa dello stile visibile.

I tre stili in breve

• Segno di spunta arrotondato: il classico pattern quadrato-con-spunta, il più comune nei campi dei moduli, nelle checkbox di accettazione termini e negli elenchi a selezione multipla.
• Interruttore a scorrimento: percepito come un'impostazione on/off istantanea più che un campo di modulo — più adatto a schermate di preferenze che a elenchi di checkbox.
• Cerchio pieno: un aspetto minimale, simile a un radio button, utile quando una casella quadrata risulterebbe visivamente pesante accanto a elementi di interfaccia arrotondati.

Abbinarla al resto della tua interfaccia

Il colore accento generato influisce solo sullo stato selezionato — scegli il colore del tuo brand o dei tuoi pulsanti per far sembrare la checkbox coerente con il resto della pagina. Abbinalo allo stesso border-radius usato altrove nell'interfaccia per un look più coeso.

→ Generatore di raggio di bordo · Selettore di colori

Domande frequenti