Come creare: casella di controllo personalizzata

Come creare caselle di controllo personalizzate

Primo passo - Aggiungi HTML:

<label class="container">Uno
  <input type="checkbox" checked="checked">
  <span class="checkmark"></span>
</label>
<label class="container">Due
  <input type="checkbox">
  <span class="checkmark"></span>
</label>
<label class="container">Tre
  <input type="checkbox">
  <span class="checkmark"></span>
</label>
<label class="container">Quattro
  <input type="checkbox">
  <span class="checkmark"></span>
</label>

Secondo passo - Aggiungi CSS:

/* Tag personalizzato (contenitore) */
.container {
  display: blocco;
  posizione: relativa;
  spaziamento_sinistro: 35px;
  margine_inferiore: 12px;
  cursore: puntatore;
  dimensione_font: 22px;
  -webkit-seleziona_utente: none;
  -moz-seleziona_utente: none;
  -ms-seleziona_utente: none;
  seleziona_utente: none;
}
/* Nascondi casella di controllo predefinita del browser */
.container input {
  posizione: assoluta;
  opacità: 0;
  cursore: puntatore;
  altezza: 0;
  larghezza: 0;
}
/* Crea casella di controllo personalizzata */
.checkmark {
  posizione: assoluta;
  alto: 0;
  sinistra: 0;
  altezza: 25px;
  larghezza: 25px;
  colore_di_sfondo: #eee;
}
/* Aggiungere lo sfondo grigio quando il mouse è sopra */
.container:hover input ~ .checkmark {
  colore_di_sfondo: #ccc;
}
/* Aggiungi sfondo blu quando selezionato */
.container input:checked ~ .checkmark {
  colore_di_sfondo: #2196F3;
}
/* Crea etichetta/indicatore (nascosto quando non selezionato) */
.checkmark:after {
  contenuto: "";
  posizione: assoluta;
  display: none;
}
/* Visualizza etichetta di selezione quando selezionato */
.container input:checked ~ .checkmark:after {
  display: blocco;
}
/* Stile di etichetta/indicatore di selezione */
.container .checkmark:after {
  sinistra: 9px;
  alto: 5px;
  larghezza: 5px;
  altezza: 10px;
  bordo: solido bianco;
  larghezza-bordo: 0 3px 3px 0;
  -webkit-trasformazione: ruotare(45deg);
  -ms-trasformazione: ruotare(45deg);
  trasformazione: ruotare(45deg);
}

Prova tu stesso

Come creare un pulsante radio personalizzato

esempio

/* Tag personalizzato (contenitore) */
.container {
  display: blocco;
  posizione: relativa;
  spaziamento_sinistro: 35px;
  margine_inferiore: 12px;
  cursore: puntatore;
  dimensione_font: 22px;
  -webkit-seleziona_utente: none;
  -moz-seleziona_utente: none;
  -ms-seleziona_utente: none;
  seleziona_utente: none;
}
/* Nascondere il pulsante radio predefinito del browser */
.container input {
  posizione: assoluta;
  opacità: 0;
  cursore: puntatore;
  altezza: 0;
  larghezza: 0;
}
/* Creare il pulsante radio personalizzato */
.checkmark {
  posizione: assoluta;
  alto: 0;
  sinistra: 0;
  altezza: 25px;
  larghezza: 25px;
  colore_di_sfondo: #eee;
  border-radius: 50%;
}
/* Aggiungere lo sfondo grigio quando il mouse è sopra */
.container:hover input ~ .checkmark {
  colore_di_sfondo: #ccc;
}
/* Aggiungere lo sfondo blu quando il pulsante radio è selezionato */
.container input:checked ~ .checkmark {
  colore_di_sfondo: #2196F3;
}
/* Creare l'indicatore (punto/cerchio - nascosto quando non selezionato) */
.checkmark:after {
  contenuto: "";
  posizione: assoluta;
  display: none;
}
/* Mostrare l'indicatore (punto/cerchio) quando selezionato */
.container input:checked ~ .checkmark:after {
  display: blocco;
}
/* Impostare lo stile dell'indicatore (punto/cerchio) */
.container .checkmark:after {
  alto: 9px;
  sinistra: 9px;
  larghezza: 8px;
  altezza: 8px;
  border-radius: 50%;
  background: white;
}

Prova tu stesso