HTML fornisce i vari parametri di input per l'inserimento dei valori, inclusi pulsanti, campi di testo, caselle di controllo, elenchi ordinati/non ordinati e molti altri. Più specificamente, se stai creando un sito Web e vuoi che i visitatori possano scegliere più elementi da un menu, l'aggiunta di una casella di controllo è un'ottima scelta.

Le caselle di controllo consentono agli utenti di selezionare più di un'opzione dal menu.

Questo tutorial indicherà:

• Come creare una casella di controllo con HTML?
• Come modellare le caselle di controllo con CSS?

Come creare una casella di controllo con HTML?

Seguire i passaggi dati per la creazione di una casella di controllo con HTML.

Passaggio 1: aggiungi l'intestazione

Includere un'intestazione nella pagina HTML utilizzando il

etichetta. Ad esempio, abbiamo utilizzato tag di intestazione di livello 1 "

"E ha aggiunto il testo come"I migliori siti Web di tutorial":

I migliori siti Web di tutorial

Produzione

Passaggio 2: crea una casella di controllo

Ora aggiungi un'etichetta insieme all'attributo della classe e posiziona il nome dell'etichetta tra i tag. Dopodiché, definisci un elemento con il tipo "Casella di controllo"Per creare una casella di controllo con un nome dell'etichetta:

Linuxhint

Come puoi vedere, la casella di controllo viene creata correttamente con la didascalia "Linuxhint":

Per aggiungere un'altra opzione di controllo, crea di nuovo una nuova etichetta, incorporare il nome dell'etichetta tra ""Tag e inserire il""Elemento con tipo"Casella di controllo":

Creatori di contenuti TSL

Si può osservare che nella pagina Web vengono aggiunte più caselle di controllo:

Passiamo verso la sezione successiva per lo styling della casella di controllo.

Casella di controllo come modellare con CSS?

Per modellare la casella di controllo con CSS, segui le istruzioni fornite.

Passaggio 1: applicare lo stile sulla casella di controllo

Applicare le seguenti proprietà su ".principale"Classe utilizzata per accedere all'elemento:

• Aggiungi la proprietà Visualizza specificando il valore "bloccare"Per trattare un elemento come un blocco.
• Imposta la proprietà di posizione come "parente"Per cambiare l'elemento rispetto a se stesso e l'elemento genitore.
• Imposta imbottitura-sinistra con il valore "45px"Per impostare la larghezza dell'area di imbottitura a sinistra e margine-fondo con il"15px"Valore per la creazione di spazio attorno agli elementi al di fuori di qualsiasi confine definito.
• Imposta la dimensione del carattere dell'etichetta:

.principale
Display: blocco; dimensione del carattere: 20px;
Posizione: relativo;
margine-bottom: 15px;
Cursore: puntatore; imbottitura-sinistra: 45px;

Passaggio 2: regolare la posizione della casella di controllo

Imposta alcune proprietà CSS su ".Linuxhint"Classe per regolare la posizione della casella di controllo, come segue:

• Imposta la posizione come "assoluto".
• Imposta l'altezza e la larghezza come "25px"
• Imposta il colore di sfondo come "nero":

.Linuxhint
Posizione: assoluto; colore di sfondo: nero;
Top: 0;
a sinistra: 0;
Altezza: 25px;
larghezza: 25px;

Passaggio 3: impostare il colore di sfondo quando la casella di controllo viene "controllata"

Ora, la proprietà in background viene utilizzata per impostare ciò che verrà visualizzato quando viene controllata la casella di controllo:

.Input principale: controllato ~ .Linuxhint
Background-color: RGB (231, 209, 12);

Passaggio 4: impostare lo stile della casella di controllo

In questo passaggio, utilizzare il codice sotto fornito per impostare la proprietà sulla casella di controllo. La casella di controllo verrà visualizzata nella casella di controllo quando viene controllata e non verrà visualizzata quando non viene verificata:

.Linuxhint: dopo
contenuto: "";
Posizione: assoluto;
visualizzazione: nessuno;

Ora, imposta la proprietà di visualizzazione come "bloccare"Per visualizzare il segno di spunta quando viene verificata la casella di controllo:

.Input principale: controllato ~ .Linuxhint: dopo
blocco di visualizzazione;

Infine, utilizzare la proprietà CSS trasforma sul rettangolo della casella di controllo per rendere il bordo come un "tic tac" forma:

.principale .Linuxhint: dopo
A sinistra: 8px;
In basso: 5px;
larghezza: 6px;
Altezza: 12px;
Bordo: RGB solido (250, 238, 238);
Larghezza del confine: 0 4px 4px 0;
trasformazione: rotare (45DEG);

Produzione

Hai imparato il metodo più semplice per lo styling della casella di controllo utilizzando CSS.

Conclusione

Per modellare una casella di controllo utilizzando CSS, prima, crea una casella di controllo con l'aiuto di HTML. Quindi, definire l'attributo di classe nell'elemento HTML e applicare il CSS sulla casella di controllo. Successivamente, modella le caselle di controllo utilizzando le proprietà CSS nella classe, come la posizione della casella di controllo, il colore di sfondo e le dimensioni delle caselle di controllo utilizzando le proprietà di altezza e larghezza. Questo post ha dimostrato il metodo per lo styling della casella di controllo utilizzando CSS.