Home>Guide>Come creare un sistema di votazione con CSS

Come creare un sistema di votazione con CSS


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



Code4Life ti è stato utile? Sostienici con una donazione!

Dona con PayPal

Hai trovato interessante l’articolo? Allora ti consiglio di leggere:

Aggiungere il supporto swipe al carousel di Bootstrap

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

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”.

Oppure cerca tra gli articoli correlati


E tu cosa ne pensi? Condividi la tua opinione e discutiamone insieme
La tua email non sarà resa pubblico o utilizzata per inviarti spam, te lo prometto

Iscrivimi alla newsletter per ricevere news ed aggiornamenti
Utilizziamo piattaforme di terze parti per l’invio di newsletter. (Privacy Policy)
Tienimi aggiornato su questo articolo
Ricevi una email di notifica quando qualcuno scriverà un commento a questo articolo. (Privacy Policy)
Ricorda i miei dati per la prossima volta che scriverò un commento
Il tuo nome e la tua email verranno salvati in un cookie in questo browser. (Privacy Policy)