Dimensione della casella di controllo CSS

In questo articolo, discuteremo delle proprietà CSS per aumentare le dimensioni di una casella di controllo. La casella di controllo predefinita nel linguaggio di markup ipertestuale è piccola e talvolta può essere difficile da individuare sulla pagina Web. Discuteremo di altezza, larghezza e trasformare le proprietà comunemente usate di CSS. Implementeremo diversi esempi relativi a questo fenomeno nell'ambiente Notepad ++.

Esempio 01: aumento delle dimensioni di una casella di controllo predefinita utilizzando le proprietà di altezza e larghezza tramite tag di stile CSS

In questo esempio, aumenteremo le dimensioni di una casella di controllo predefinita fornita dal linguaggio di markup ipertestuale. La tecnica del tag in stile CSS verrà utilizzata in questo esempio per dare alla casella di controllo una dimensione diversa. Entrambe le proprietà che cambiano le dimensioni verranno aggiunte a una classe di styling per la casella di controllo in questo esempio.

Nello script sopra, stiamo iniziando con l'intestazione del file in cui abbiamo chiamato il tag CSS "stile". All'interno di questo tag, aggiungeremo una classe per l'elemento di input che rappresenta la casella di controllo del linguaggio di markup ipertestuale. Nomineremo la dimensione della classe. In questa classe, definiremo le proprietà che cambieranno le dimensioni della casella di controllo. Innanzitutto, definiremo la proprietà di larghezza dandogli un valore di "50px". Quindi, definiremo la proprietà di altezza dandogli lo stesso valore.

Successivamente, chiuderemo lo stile del file e i tag di intestazione per aprire il tag del corpo. Nel tag del corpo, inizieremo dandogli una voce con un tag "H1". Quindi, apriremo il tag di input. In questo tag, definiremo il tipo di elemento di input etichettandolo come una casella di controllo. Dopo questo, chiameremo anche la "dimensione" della classe di stile che abbiamo creato nell'intestazione del file. Alla fine, lo specificheremo come "controllato" per impostazione predefinita e chiudere il tag input e corpo.

Dopo aver salvato lo script precedente e averlo aperto sul nostro browser, otterremo l'output sopra. Come risultato dei parametri di altezza e larghezza in questo output, la casella di controllo è stata ampliata di dimensioni.

Esempio 02: aumento delle dimensioni di una casella di controllo predefinita utilizzando le proprietà di altezza e larghezza tramite CSS in linea

L'approccio in linea in stile CSS verrà utilizzato per regolare le dimensioni della casella di controllo in questo esempio. In questo esempio aumenteremo una casella di controllo predefinita offerta dal linguaggio di markup ipertestuale. In questo esempio entrambe le funzionalità di cambio di dimensioni verranno applicate a un tag di stile all'interno dell'elemento di input.

All'inizio dello script, apriremo un tag di stile nel tag testa solo per il corpo del file in cui allineeremo il testo del corpo al centro in questo script. Quindi chiuderemo lo stile e la tag della testa per aprire il tag del corpo. Nel tag del corpo, daremo una rotta alla pagina con l'aiuto del tag "H1". Quindi, apriremo il tag di input e definiremo il tipo di elemento di input identificandolo come una "casella di controllo."In seguito, specificheremo lo styling della casella di controllo utilizzando il termine CSS in linea" Stile."In questa chiamata, definiremo le caratteristiche di larghezza e altezza fornendo loro i valori dei pixel. Quindi, lo imposteremo su "controllato" per impostazione predefinita e chiuderemo i tag di input e del corpo. Salvemo questo file in ".Formato HTML "e aprilo sul nostro browser per ottenere l'output mostrato di seguito:

In questo output possiamo osservare che la casella di controllo è cresciuta a causa delle proprietà di altezza e larghezza come definito all'interno dell'attributo di stile del tag di input.

Esempio 03: aumento della dimensione di una casella di controllo predefinita utilizzando la proprietà trasforma tramite tag di stile CSS

Aumentare la dimensione di una casella di controllo predefinita fornita dal linguaggio di markup ipertestuale. In questo esempio, alla casella di controllo verrà fornita una dimensione personalizzata utilizzando la tecnica del tag in stile CSS. In questo esempio, la proprietà Transform verrà aggiunta a una classe di styling della casella di controllo che ingrandirà la dimensione della casella di controllo predefinita.

Nello script seguente, iniziamo con l'intestazione del file in cui abbiamo chiamato il tag CSS "Style."All'interno del tag di input, aggiungeremo una classe all'elemento di input che rappresenta la casella di controllo del linguaggio di markup ipertestuale. Chiameremo quindi la dimensione della classe. All'interno di esso, creeremo l'attributo che regolerà la dimensione della casella di controllo. La proprietà Transform verrà definita e scritta con la parola chiave della scala che accetterà l'intero dimensione di ridimensionamento come input. Successivamente, chiuderemo il tag e l'intestazione di stile del file per fare spazio al tag del corpo. Inizieremo con un tag "H1" nel tag del corpo per dargli una voce. Quindi, apriremo il tag di input in cui etichetteremo l'elemento di input come casella di controllo e descriveremo il suo tipo lì. Successivamente, nomineremo la "dimensione" della classe di stile che abbiamo stabilito nell'intestazione del file. Infine, imposteremo il valore predefinito su "selezionato" e chiutreremo i tag di input e del corpo.

Otterremo l'output sopra dopo aver salvato lo script precedente e l'apertura nel nostro browser. In questo output, possiamo vedere che la casella di controllo si è ampliata di dimensioni a causa della proprietà di trasformazione.

Esempio 04: Utilizzo di tre proprietà CSS per aumentare la dimensione di una casella di controllo in un file HTML

L'approccio in linea in stile CSS verrà utilizzato per regolare le dimensioni della casella di controllo in questo esempio. Tutte e tre le proprietà CSS verranno aggiunte a un tag di stile all'interno del tag di input in questo esempio. Auggereremo le dimensioni della casella di controllo predefinite offerte dalla lingua di markup ipertestuale.

In questo script, inizieremo aprendo un tag di stile nel tag principale che si applica solo al corpo del file. Quindi, ceneremo il contenuto del corpo. Lo stile e le etichette della testa saranno quindi chiusi, consentendo l'apertura del tag del corpo. Con l'aiuto dell'elemento "H1" nel tag corporeo, daremo alla pagina un'intestazione. Successivamente, useremo il termine CSS in linea "stile" per esprimere lo stile della casella di controllo. In questa chiamata, specificheremo le caratteristiche di larghezza e altezza fornendo loro valori di pixel. Quindi, aggiungeremo anche la proprietà Transform in questa chiamata per ridimensionare la casella di conseguenza di conseguenza. Successivamente, lo definiremo come "controllato" e chiudere i tag input e del corpo. Salvemo questo file in ".Formato HTML "e aprilo sul nostro browser per ottenere l'output mostrato di seguito:

Come risultato dell'altezza, della larghezza e della trasformazione delle proprietà in questo output definito all'interno del tag di input, la casella di controllo è stata ampliata di dimensioni.

Conclusione:

In questo articolo, abbiamo discusso di diverse proprietà CSS che vengono utilizzate per aumentare le dimensioni o espandere una casella di controllo delle dimensioni predefinite in un file HTML. Le prime due proprietà sono altezza e larghezza che possono essere aggiunte a una classe di stile o tag nell'elemento di input del linguaggio di markup ipertestuale. Queste proprietà sono state utilizzate per aumentare le dimensioni di una casella di controllo in due diverse tecniche CSS che sono CSS in stile e CSS in linea. Abbiamo anche implementato la proprietà Transform che CSS fornisce che utilizza la funzione di scala per espandere una casella di controllo predefinita.