Come aumentare la dimensione della casella di controllo in CSS

Una casella di controllo è un tipo di input di HTML che consente all'utente di fare una scelta tra due o più possibili opzioni. Permette all'utente di selezionare più valori da un elenco predefinito. Per impostazione predefinita, la casella di controllo si trova nella piccola scatola quadrata; Tuttavia, a volte, è importante aumentare le dimensioni della casella di controllo per aumentare la sua visibilità.

In questo manuale, spiegheremo il metodo per aumentare le dimensioni della casella di controllo utilizzando CSS.

Come aumentare la dimensione della casella di controllo in CSS?

È possibile utilizzare le caselle di controllo in HTML per prendere input dagli utenti. Offre un insieme predefinito di valori utilizzando che l'utente può fare una scelta binaria. Inoltre, per aumentare le dimensioni della casella di controllo, il "larghezza" E "altezza"Le proprietà del CSS possono essere utilizzate.

Sintassi

La sintassi di queste proprietà è:

larghezza: valore
Altezza: valore

Al posto di "valore", Puoi impostare il"larghezza" E "altezza"Di qualsiasi elemento secondo le tue preferenze.

Passiamo all'esempio pratico, dove creeremo una casella di controllo e ne aumenteremo le dimensioni usando "larghezza" E "altezza" proprietà.

Esempio: creare una casella di controllo e aumentare le sue dimensioni in CSS

Per aumentare la dimensione della casella di controllo, in primo luogo, prenderemo un tipo di input "Casella di controllo"Nel file HTML all'interno del tag:

Attualmente, la dimensione predefinita della casella di controllo è la seguente:

Ora, spostati sul CSS per aumentare le dimensioni della casella di controllo.

Qui accederemo al "ingresso"Tipo definito nella sezione HTML e impostare la larghezza e l'altezza della casella di controllo come"50px":

ingresso
larghezza: 50px;
Altezza: 50px;

Abbiamo aumentato con successo le dimensioni della casella di controllo creata con l'aiuto delle proprietà CSS di altezza e larghezza:

Nota: Per aumentare le dimensioni della casella di controllo, "larghezza" E "altezza"Entrambe le proprietà sono necessarie per impostare in quanto la dimensione non cambia se si specifica un valore.

Abbiamo coperto un metodo semplice per aumentare la dimensione della casella di controllo in CSS.

Conclusione

Il CSS "larghezza" E "altezza"Le proprietà vengono utilizzate per aumentare le dimensioni della casella di controllo. È possibile specificare qualsiasi valore in "Px"Unità per impostare le dimensioni in base alle tue esigenze. Tuttavia, sono necessari valori di entrambe le proprietà per ridimensionare la casella di controllo. In questa guida, abbiamo spiegato la procedura per aumentare la dimensione della casella di controllo utilizzando CSS.