Come creare un sistema di votazione con CSS
Ti piacerebbe dare ai tuoi utenti la possibilità di lasciare un feedback ai tuoi articoli o ai prodotti del tuo e-commerce? Fornisci loro un sistema di rating che permetta di esprimere tramite la selezione di una più stelle la propria valutazione. Il tutto, senza scrivere neanche una riga di JavaScript e senza utilizzare alcuna libreria esterna!
- Leggi l'articolo, ti bastano solo 2 minuti, 30 secondi
Sei di fretta? Scarica il PDF e consultalo quando vuoi!
Il progetto
Partiamo con il comprendere cosa vogliamo realizzare a livello teorico, per poi lanciarci nella pratica. L’idea è di creare un sistema che permetta all’utente di scegliere una singola opzione tra quelle messe a disposizione. Nel caso specifico, si tratta di un voto, che ipotizziamo da essere da 1 a 5.
Il markup
Ma aspetta, esiste già qualcosa che in HMTL permette di fare questo? Si, esatto, stiamo parlando della selezione tramite input di tipo radio, che consente all’utente di effettuare una scelta esclusiva (una scelta esclude automaticamente le altre).
Partiamo dunque scrivendo le poche righe di HTML necessarie ad ottenere i cinque campi radio:
<div class="c4l-rating"> <input name="c4l-rating" type="radio" id="c4l-rate1" value="1" /> <label for="c4l-rate1"></label> <input name="c4l-rating" type="radio" id="c4l-rate2" value="2" /> <label for="c4l-rate2"></label> <input name="c4l-rating" type="radio" id="c4l-rate3" value="3" /> <label for="c4l-rate3"></label> <input name="c4l-rating" type="radio" id="c4l-rate4" value="4" /> <label for="c4l-rate4"></label> <input name="c4l-rating" type="radio" id="c4l-rate5" value="5" checked /> <label for="c4l-rate5"></label> </div>
I campi hanno ovviamente lo stesso nome, così come prevede lo standard HTML del tag <input type=”radio”> ed ognuno di essi ha come value il voto corrispondente alla scelta di quel campo.
Otterremo in questo modo il seguente risultato:
Lo style
Beh, effettivamente è un po’ bruttino, anche se già così sarebbe funzionale allo scopo. Ma non accontentiamoci, vediamo come renderlo anche bello.
Per prima cosa, ci occorre un’icona a forma di stella. Io di solito per le icone utilizzo FontAwesome, se non lo conosci te lo consiglio!
Una volta scaricato e scompagnato il file .zip, aggiungilo nel tuo progetto, inserendo prima della chiusura del tag <head>:
<link rel="stylesheet" href="{percorso_dei_files_css}/font-awesome-4.7.0/css/font-awesome.min.css" type="text/css" media="all" />Bene, ora non ti resta che dare lo stile al markup inserito precedentemente:
.c4l-rating input[name="c4l-rating"] { display: none; }
.c4l-rating input[name="c4l-rating"] + label:after { content: none; }
.c4l-rating input[name="c4l-rating"] + label { font-family: 'FontAwesome'; }
.c4l-rating input[name="c4l-rating"] + label:before {
background-color: transparent;
border: none;
color: #ffc107;
content: '\f005';
font-size: 1.33333333em;
transition: none;
}
.c4l-rating input[name="c4l-rating"]:checked ~ label:before {
background-color: transparent;
border: none;
color: #607d8b;
}
.c4l-rating input[name="c4l-rating"]:checked + label:before { color: #ffc107; }
.c4l-rating input[name="c4l-rating"] + label:hover ~ input + label:before { opacity: 0.6; }Un piccolo approfondimento
- Riga 1: La prima cosa fatta è stata nascondere il tag <input> di default, così da poterlo sostituire con le icone di nostra scelta.
- Riga 3-11: Qui abbiamo assegnato al tag <label> di ogni <input> di tipo radio, tramite lo pseudo-elemento :after l’icona a forma di stella, prelevandola tra quelle disponibili in FontAwesome.
- Riga 12-16: Utilizzando le proprietà CSS :checked (campo input radio selezionato) e lo pseudo-selettore ~ (sibling), facciamo in modo che tutti gli elementi che hanno lo stesso padre (nel nostro caso <div class=”rating”>) e sono successivi all’input radio selezionato, cambino colore.
- Riga 17-18: Con le ultime righe, invece, diamo un piccolo effetto di opacità in caso di hover sui campi input.
Ecco il risultato finale:
Bello vero? Ovviamente, sei libero di personalizzare il tutto come meglio credi, cambiando l’icona della stella, oppure modificandone i colori.
Ti è piaciuto questo articolo? Regalami un click per ripagarmi dello sforzo
Hai trovato interessante l’articolo? Allora ti consiglio di leggere:
Aggiungere il supporto swipe al carousel di Bootstrap
Scopriamo in questo breve articolo come aggiungere il supporto mobile al carousel di Bootstrap, per avere un sito web sempre più fruibile da dispositivi mobile.
Mettere il sito in maintenance mode con .htaccess
Ecco un utilissima guida su come mettere in modalità di manutenzione il tuo sito in WordPress, permettendoti di continuare a lavorare “dietro le quinte”.
Cioa. Grazie per lo script. Funziona, ma solo per un elemento. I ovorrei integrarlo in un array di elementi, tipo un agallery. Lo spunto funziona, ma non riesco a far visualizzare le stelle.
Capisco che bisogna indicizzarlo, ma ci sono riuscito per metà. Attendo tue… Ciao.