Casella di controllo personalizzato Bootstrap come Bootstrap

Un popolare bootstrap CSS Framework consente agli sviluppatori di creare facilmente e rapidamente applicazioni Web pronte per i dispositivi mobili e reattive. Ha centinaia di classi pre-progettate CSS. Tutto quello che devi fare è aggiungere la classe richiesta all'elemento particolare. Tuttavia, per specificare gli stili personalizzati agli elementi, è possibile utilizzare CSS.

Questo articolo coprirà:

• Qual è l'elemento HTML ""?
• Casella di controllo personalizzato Bootstrap come Bootstrap?

Qual è l'elemento HTML ""?

In HTML, il ""Elemento con il tipo"Casella di controllo"Crea una casella di controllo nella pagina Web. Inoltre, le caselle di controllo consentono di controllare più di una casella di controllo alla volta.

Esempio

Prima di spostarsi verso l'argomento principale di questo post, vediamo come appare la casella di controllo predefinita. Per fare ciò, aggiungi il ""Elemento con la didascalia e specificare il""Elemento con il tipo"Casella di controllo"E l'attributo"controllato". IL "controllato"Attributo con il valore"controllato"Viene utilizzato per controllare la casella per impostazione predefinita:

Stile di controllo predefinito

Produzione

Casella di controllo personalizzato Bootstrap come Bootstrap?

Per effettuare la casella di controllo personalizzata, prova i passaggi menzionati di seguito:

Passaggio 1: creare un file HTML

Innanzitutto, crea un file HTML seguendo le seguenti istruzioni:

• Aggiungere un ""Elemento con il"P-4Classi "Container-Fluid".
• Quindi, specifica l'intestazione usando "

  "Elemento.

• Aggiungi tre ""Elementi e assegna loro la classe"Controllo personalizzato".
• Dentro il ""Elementi, aggiungi il""Elemento con il"tipo"Valore dell'attributo"Casella di controllo". Solo il primo input deve essere associato al "controllato"Attributo.
• Infine, menziona il ""Elemento per il segno di spunta.

Html

Seleziona il menu

Pizza



Burger



Patatine fritte

I passaggi seguenti devono essere implementati nella sezione CSS.

Passaggio 2: nascondi la casella di controllo predefinita

Dato che dobbiamo creare una casella di controllo personalizzata, è necessario nasconderla. Per fare ciò, accedi al "Controllo personalizzato"Classe e applicare gli stili su"" elementi:

.Input di controllo personalizzato
Posizione: assoluto;
opacità: 0;

Qui:

• "posizione" con il "assoluto"Il valore imposta la posizione dell'elemento rispetto al suo elemento genitore.
• "opacità"Con il valore"0"Nasconde il"" elementi.

Passaggio 3: modella la classe "Controllo personalizzato"

.Custom-Check
Font-size: 22px;
Posizione: relativo;
blocco di visualizzazione;
imbottitura-sinistra: 35px;
Cursore: puntatore;
margine-bottom: 12px;

La spiegazione delle proprietà sopra menzionate è discussa di seguito:

• "dimensione del font"La proprietà imposta la dimensione del carattere dell'elemento.
• "posizione" con il "parente"Il valore regola la posizione dell'elemento corrispondente alla sua posizione corrente.
• "Schermo" con il "bloccare"Il valore fornisce la larghezza intera all'etichetta.
• "imbottitura-sinistra"Aggiunge un po 'di spazio a sinistra del contenuto dell'elemento.
• "cursore"Imposta lo stile del puntatore del mouse.
• "margin-bottom"Aggiunge spazio nella parte inferiore dell'elemento.

Passaggio 4: creare una casella di controllo personalizzata

Per effettuare la casella di controllo personalizzata, aggiungere le seguenti proprietà CSS:

.segno di spunta
Posizione: assoluto;
Altezza: 27px;
larghezza: 27px;
Top: 0;
a sinistra: 0;
Background-color: RGB (233, 233, 233);
raggio di confine: 10px;

Qui:

• "altezza "e" larghezza"Proprietà imposta la dimensione dell'elemento.
• "in alto "e" a sinistra "con" 0"I valori non specificano spazio nella parte superiore e sinistra dell'elemento.
• "colore di sfondo"Determina il colore di sfondo dell'elemento.
• "raggio di confine"Rotola gli angoli dell'elemento.

Si può osservare che le caselle di controllo personalizzate sono state create correttamente:

Passaggio 5: modellare la casella di controllo quando è selezionata

Le proprietà CSS di seguito sono implementate sulla casella di controllo quando viene controllata:

.Input di controllo personalizzato: controllato ~.segno di spunta
Background-color: #6202CF;
raggio di confine: 5px;

Finora, le caselle di controllo sono disegnate come mostrato nella gif seguente:

Ora, creiamo il segno di spunta nelle sezioni seguenti.

Passaggio 6: crea il segno di spunta

Per nascondere il segno di spunta quando non viene controllato, implementa le proprietà menzionate di seguito:

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

IL ".Checkmark: dopo"È menzionato per accedere alla classe"checkmark "e": dopo"È una classe pseudo, utilizzata per implementare stili dopo il contenuto:

• "contenuto"Specifica il contenuto inserito.
• "Schermo"Con il valore"nessuno"Nasconde il segno di spunta.

Passaggio 7: mostra il segno di spunta quando è stato selezionato

Quando l'utente controlla la casella di controllo, deve visualizzare il segno di spunta. Per fare ciò, il segno di spunta viene applicato con il CSS "Schermo"Proprietà con il valore"bloccare":

.Input di controllo personalizzato: controllato ~.checkmark: dopo
blocco di visualizzazione;

Passaggio 8: modella il segno di spunta

Ecco le proprietà CSS per creare il segno di spunta:

.Controllo personalizzato .checkmark: dopo
A sinistra: 8px;
Top: 5px;
larghezza: 9px;
Altezza: 14px;
Bordo: bianco solido;
Larghezza del confine: 0 3px 3px 0;
trasformazione: rotare (45DEG);

Secondo il codice dato:

• "a sinistra "e" in alto"Specificare lo spazio a sinistra e in alto dei lati del segno di spunta.
• "larghezza e altezza"Regola l'area del segno di spunta.
• "confine"La proprietà crea il segno di spunta.
• "larghezza del bordo"La proprietà specifica i confini superiore, destro, in basso e sinistro. Qui vengono specificate solo le proprietà giuste e in basso.
• "trasformare"Proprietà con il valore"Ruota (45DEG)"Ruota il segno di spunta a 45 gradi.

Produzione

Si trattava di come modellare una casella di controllo personalizzata usando bootstrap.

Conclusione

Per modellare la casella di controllo personalizzata bootstrap, prima, crea una pagina HTML. Aggiungi il "" E ""Con il tipo"Casella di controllo" elementi. Quindi, vengono utilizzate diverse proprietà CSS per modellarle. Più specificamente, per ottenere il segno di spunta, il CSS "bordo "e" larghezza di confine"Le proprietà sono utilizzate. Questo post ha spiegato come modellare una casella di controllo personalizzata in bootstrap.