Una casella di controllo è un elemento HTML che consente all’utente di definire lo stile di una casella di controllo con i CSS. Gli pseudo elementi come:before,:after, hover e:checked possono essere usati per modificare l’aspetto di una casella di controllo. Per modificare l’aspetto della casella di controllo, l’utente deve prima nascondere la casella di controllo predefinita. Questo viene fatto impostando la proprietà di visibilità su”hidden”.
Per assicurarsi che l’utente abbia una buona esperienza visiva, è importante che i web designer e gli sviluppatori utilizzino molto le funzionalità di stile dei CSS. Le caselle di controllo possono anche essere stilizzate per farle sembrare migliori, proprio come altri elementi HTML Modella una casella di controllo con i CSS.
Le caselle di controllo non possono utilizzare proprietà CSS come colore, carattere, bordo, larghezza e altezza. In questo post parleremo delle proprietà CSS che puoi utilizzare per modificare le caselle di controllo e dei modi in cui possono migliorare la tua UI/UX.
Come definire lo stile di una casella di controllo con i CSS
Crea HTML
Utilizza un
Aggiungi CSS
Nascondi le caselle di controllo impostando la proprietà di visibilità sul relativo valore”nascosto“. Usa la pseudo-classe:checked, che aiuta a vedere quando la casella di controllo è selezionata. Applicare uno stile all’etichetta con le proprietà width, height, background, margin e border-radius. Impostare la posizione su”relativa”. Modella la classe”checkbox-example”impostando il display su”block”e specificando le proprietà di width e height. Quindi, specifica il raggio del bordo, la transizione, la posizione e altre proprietà. Ora il dispositivo di scorrimento è nella posizione deselezionata. Per spostare il pulsante del dispositivo di scorrimento, dobbiamo sapere se la casella di controllo è selezionata. Quando è selezionato, dobbiamo modificare la proprietà left dell’elemento label. Usiamo il combinatore + per selezionare l’etichetta sibling, proprio accanto ad essa.
FAQ
Come controllare la casella di controllo usando i CSS?
Il selettore di pseudo-classe CSS:checked rappresenta qualsiasi elemento radio ( ), casella di controllo ( ) o opzione ( in un ) che è selezionato o attivato.
Come applicare i CSS all’input della casella di controllo?
basta aggiungere la class=”casella di controllo”alle caselle di controllo. Quindi crea quello stile nel tuo codice css. Dovrai comunque aggiungere la classe affinché funzioni in IE e non funzionerà in altri browser diversi da IE che non supportano IE.
Come posso allineare una casella di controllo in HTML CSS?
Imposta la proprietà vertical-align su”bottom”, che è coerente tra i browser. Imposta la proprietà position su”relativo”per posizionare l’elemento rispetto alla sua posizione normale.
Puoi dare uno stile alle caselle di avviso in CSS?
La casella di avviso standard in JavaScript non fornisce l’opzione per applicare i CSS. Per dare uno stile alla tua casella di avviso, devi prima crearne una personalizzata. La casella di avviso personalizzata verrà creata utilizzando jQuery e gli stili verranno applicati ai CSS.
By Maxwell Gaven
Lavoro nel settore IT da 7 anni. È divertente osservare i continui cambiamenti nel settore IT. L'IT è il mio lavoro, il mio hobby e la mia vita.