Come creare dei checkbox e dei pulsanti radio attraenti con CSS3

Conosciamo tutti i checkbox HTML ed i radio button (detti anche pulsanti di opzione o pulsanti radio). La cosa più frustrante è che non c'è modo di cambiare il loro aspetto. Hanno un aspetto diverso, a seconda del sistema operativo e del browser utilizzati, e non possiamo progettarli con CSS.

Questo infastidisce la maggior parte dei designer che desiderano rendere questi elementi attraenti e non rovinare l'intero design. In questo tutorial ti mostreremo come renderli davvero carini con un semplice trucco.

Sii forte. Nascondi i tuoi checkbox

Può sembrare contraddittorio, ma per rendere i nostri checkbox e i nostri pulsanti di opzione sembrano buoni, dobbiamo nasconderli e dimenticarli. Applichiamo semplicemente una semplice regola:

.section input[type="radio"],
.section input[type="checkbox"]{
  display: none;
}

Ma, ti starai chiedendo, cosa faremo senza di loro? Non ti preoccupare, costruiremo delle caselle nuove. Allora, vediamo come si fa.

Pulsanti Radio

Prima di tutto, questo è il nostro markup:

<section id="first" class="section">
    <div class="container">
      <input type="radio" name="group1" id="radio-1">
      <label for="radio-1"><span class="radio">Coffee</span></label>
    </div>
    <div class="container">
      <input type="radio" name="group1" id="radio-2">
      <label for="radio-2"><span class="radio">Tea</span></label>
    </div>
    <div class="container">
      <input type="radio" name="group1" id="radio-3">
      <label for="radio-3"><span class="radio">Cappuccino</span></label>
    </div>
</section>

Abbiamo una sezione in cui metteremo tre pulsanti radio. Ci concentreremo sui checkbox in seguito, poiché il loro principio è lo stesso. Ogni voce è racchiusa in un div con una classe container. Inoltre, ogni voce ha un'etichetta con uno span.

Importante!

Dato che abbiamo nascosto la casella di controllo es i pulsanti radio, l'unico modo per accedervi sarebbe utilizzare un tag. Per funzionare correttamente, il tag deve contenere l'attributo "for"  con l'ID della voce corrispondente. Se l’ID di un input è "radio-1", allora l’attributo "for" dovrebbe anch’esso essere "radio-1".

Ti starai chiedendo perché abbiamo avvolto il testo all'interno di ogni etichetta in un span:

<div class="container">
      <input type="radio" name="group1" id="radio-1">
      <label for="radio-1"><span class="radio">Coffee</span></label>
</div>

Dal momento che stiamo per applicare lo stile ai pulsanti di opzione con pseudo-elementi "::before e "::after: : " abbiamo bisogno di un elemento principale sulla base del quale possono essere posizionati. In questo caso, sarà la nostra etichetta:

.container label {
  position: relative;
}

Ecco un insieme di stili che è condiviso tra i checkbox e i pulsanti di opzione:

.container span::before,
.container span::after {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  margin: auto;
}

Le proprietà superiori e inferiori impostate come zero e combinate con "margin: auto;" permettono ai nostri elementi di avere una posizione orizzontale centrata.

Ecco l’aspetto che ha il resto degli stili:

.container span.radio:hover {
  cursor: pointer;
}
.container span.radio::before {
  left: -52px;
  width: 45px;
  height: 25px;
  background-color: #A8AAC1;
  border-radius: 50px;
}
.container span.radio::after {
  left: -49px;
  width: 17px;
  height: 17px;
  border-radius: 10px;
  background-color: #6C788A;
  transition: left .25s, background-color .25s;
}
input[type="radio"]:checked + label span.radio::after {
  left: -27px;
  background-color: #EBFF43;
}

La parte più importante è l'ultima serie di regole che fondamentalmente fa tutto il trucco. La pseudo-classe ":checked" ci permette di apportare modifiche agli elementi quando la voce è selezionata. Con il selettore "+" possiamo scegliere il prossimo elemento per "span.radio", dove applichiamo nuove regole al pseudo elemento "::after". In questo caso cambiamo la sua posizione orizzontale e il colore.

Affinché la modifica sia fluida, assegniamo la transizione di 0,25 secondi alla proprietà sinistra e al colore di sfondo. Ora, quando clicchiamo sul pulsante radio, l'interruttore si muove senza problemi invece di saltare velocemente.

Checkbox

Se vuoi creare dei checkbox personalizzati, il metodo è lo stesso. Dai un’occhiata agli stili:

  width: 27px;
  height: 27px;
  background-color: #fff;
  left: -35px;
  box-sizing: border-box;
  border: 3px solid transparent;
  transition: border-color .2s;
}
.container span.checkbox:hover::before {
  border: 3px solid #F0FF76;
}
.container span.checkbox::after {
  content: '\f00c';
  font-family: 'FontAwesome';
  left: -31px;
  top: 2px;
  color: transparent;
  transition: color .2s;
}
input[type="checkbox"]:checked + label span.checkbox::after {
  color: #62AFFF;
}

L'unica differenza è che stiamo usando un'icona della famiglia di font FontAwesome come il nostro pseudo elemento "::after".

Di default è trasparente, ma quando la casella è selezionata, l'icona diventa blu.

A parte

Se vuoi usare un'icona FontAwesome nel tuo pseudo elemento, devi includere il suo codice nella proprietà content e specificare la proprietà di famiglia di font come “FontAwesome”. Per esempio:

{
content: '\f00c';
font-family: 'FontAwesome';
}

Il codice f00c è preceduto da una barra diagonale che è necessaria per evitare il carattere Unicode. L'Unicode può essere trovato nella pagina dell'icona scelta: