Softonic

Generatore di checkbox CSS

Passaggio 1 / 2
Risultati

Le checkbox predefinite hanno un aspetto diverso su ogni sistema operativo e sono difficili da personalizzare. Questo generatore crea CSS puro che dà a una checkbox nativa l’aspetto che vuoi: scegli il colore dello stato selezionato, il colore del bordo, la dimensione e il raggio degli angoli. Poiché lo stile viene applicato a un input reale, la tastiera, gli screen reader e l’invio dei moduli continuano a funzionare. Copia il CSS generato e aggiungilo al tuo foglio di stile.

Come stilizzare una checkbox

  1. 1

    Scegli i colori

    Seleziona il colore di sfondo per lo stato selezionato e il colore del bordo della casella.

  2. 2

    Imposta la dimensione

    Scegli una dimensione tra 12 e 48 px.

  3. 3

    Imposta la forma

    Scegli il raggio degli angoli della casella, fino a 20 px.

  4. 4

    Copia il CSS

    Anteprima il segno di spunta e copia la regola generata nel tuo foglio di stile.

Cosa fa il CSS generato

La regola viene applicata direttamente all’input con appearance: none, che rimuove l’aspetto predefinito per poter stilizzare la casella:

.checkbox {
  appearance: none;
  width: 20px;
  height: 20px;
  border: 2px solid #d1d5db;
  border-radius: 4px;
  cursor: pointer;
  position: relative;
  transition: all 0.15s ease;
}

Quando la checkbox è selezionata, la casella si riempie con il colore scelto e appare un segno di spunta bianco, disegnato in CSS:

.checkbox:checked {
  background: #10b981;
  border-color: #10b981;
}
.checkbox:checked::after {
  content: "";
  position: absolute;
  left: 5px;
  top: 2px;
  width: 6px;
  height: 10px;
  border: solid white;
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}

Perché un input nativo

Lo stile non sostituisce mai l’elemento con un div: il vero <input type="checkbox"> conserva l’attivazione da tastiera, il supporto per gli screen reader e l’invio del modulo. appearance: none cambia solo l’aspetto. Se devi supportare vecchie versioni di Safari, aggiungi -webkit-appearance: none alla regola.

Focus e passaggio del puntatore

La regola generata include una transizione di colore fluida, ma nessuno stile per focus o puntatore. Aggiungi le tue regole per :hover e :focus-visible, così gli utenti da tastiera vedono sempre dove si trova il focus, ad esempio un contorno colorato attorno alla casella.

Il segno di spunta

Il segno di spunta è una piccola linea bianca ruotata di 45 gradi. Se ti serve un altro colore o un tratto più sottile o più spesso, modifica i valori border e border-width nella regola ::after.

Domande frequenti

No. Produce solo CSS. Applica la classe a un input reale nel tuo modulo, con o senza etichetta visibile.

Sì. La regola usa appearance: none sull’input nativo, quindi il valore viene inviato normalmente e il supporto da tastiera e per gli screen reader resta intatto.

La dimensione si imposta nel generatore, da 12 a 48 px. Colore e spessore del segno di spunta si modificano nella regola ::after del CSS generato.

Per i target touch punta ad almeno 24 px, idealmente 44 px come gli altri controlli. Mantieni la casella allineata al testo dell’etichetta nel tuo design.

Strumenti correlati

Riferimento Tabella ASCII

Tabella ASCII completa da 0 a 127 con decimale, esadecimale, ottale, binario e riferimento numerico HTML per ogni carattere, inclusi i codici di controllo come NUL, LF e DEL.

Generatore di lettere casuali

Genera lettere A-Z casuali. Scegli la quantità, usa maiuscole, minuscole o un mix, e applica il risultato a giochi, spunti o attività in classe.

Riferimento ai caratteri HTML

Elenco ricercabile delle entità HTML, dei loro codici nominati e numerici, e copia con un clic per caratteri e simboli speciali.

Riferimento scorciatoie da tastiera

Cerca le scorciatoie predefinite documentate di VS Code, Chrome e Bash con GNU Readline su macOS, Windows e Linux.

Trova nome colore

Trova il colore CSS standard con nome più vicino a un valore HEX, RGB o HSL usando la differenza CIEDE2000.

Semplificatore di Algebra Booleana

Valuta un'espressione booleana per ogni combinazione di input e mostra la tabella della verità completa. Supporta fino a cinque variabili e gli operatori &, |, ! e ^.

Strumento disponibile in altre lingue