Sistema de clasificación por estrellas basado en botón de radio

Vista prévia

Descripción

Un sistema de clasificación basado en HTML/CSS simple que utiliza estrellas SVG para los símbolos de clasificación. Viene con un efecto de selección/deseleccionar suave basado en transiciones CSS3.

Funcionamiento

Cree botones de radio para el sistema de calificación de 5 estrellas.

<input type="radio" name="stars" id="star-null">
<input type="radio" name="stars" id="star-1">
<input type="radio" name="stars" id="star-2">
<input type="radio" name="stars" id="star-3" checked>
<input type="radio" name="stars" id="star-4">
<input type="radio" name="stars" id="star-5">

Envolver las estrellas SVG en los elementos de la etiqueta como sigue:

<label for="star-1">
 <svg width="255" height="240" viewBox="0 0 51 48">
 <path d="m25,1 6,17h18l-14,11 5,17-15-10-15,10 5-17-14-11h18z"/>
 </svg>
 </label>
<label for="star-2">
 <svg width="255" height="240" viewBox="0 0 51 48">
 <path d="m25,1 6,17h18l-14,11 5,17-15-10-15,10 5-17-14-11h18z"/>
 </svg>
 </label>
<label for="star-3">
 <svg width="255" height="240" viewBox="0 0 51 48">
 <path d="m25,1 6,17h18l-14,11 5,17-15-10-15,10 5-17-14-11h18z"/>
 </svg>
 </label>
<label for="star-4">
 <svg width="255" height="240" viewBox="0 0 51 48">
 <path d="m25,1 6,17h18l-14,11 5,17-15-10-15,10 5-17-14-11h18z"/>
 </svg>
 </label>
<label for="star-5">

<svg width="255" height="240" viewBox="0 0 51 48">
 <path d="m25,1 6,17h18l-14,11 5,17-15-10-15,10 5-17-14-11h18z"/>
 </svg>
 </label>
<label for="star-null"> Clear </label>

Estilo del sistema de clasificación con los siguientes fragmentos de código CSS.

#star-1:checked ~ section [for='star-1'] svg, #star-2:checked ~ section [for='star-1'] svg, #star-2:checked ~ section [for='star-2'] svg, #star-3:checked ~ section [for='star-1'] svg, #star-3:checked ~ section [for='star-2'] svg, #star-3:checked ~ section [for='star-3'] svg, #star-4:checked ~ section [for='star-1'] svg, #star-4:checked ~ section [for='star-2'] svg, #star-4:checked ~ section [for='star-3'] svg, #star-4:checked ~ section [for='star-4'] svg, #star-5:checked ~ section [for='star-1'] svg, #star-5:checked ~ section [for='star-2'] svg, #star-5:checked ~ section [for='star-3'] svg, #star-5:checked ~ section [for='star-4'] svg, #star-5:checked ~ section [for='star-5'] svg {
 -webkit-transform: scale(1);
 transform: scale(1);
}
#star-1:checked ~ section [for='star-1'] svg path, #star-2:checked ~ section [for='star-1'] svg path, #star-2:checked ~ section [for='star-2'] svg path, #star-3:checked ~ section [for='star-1'] svg path, #star-3:checked ~ section [for='star-2'] svg path, #star-3:checked ~ section [for='star-3'] svg path, #star-4:checked ~ section [for='star-1'] svg path, #star-4:checked ~ section [for='star-2'] svg path, #star-4:checked ~ section [for='star-3'] svg path, #star-4:checked ~ section [for='star-4'] svg path, #star-5:checked ~ section [for='star-1'] svg path, #star-5:checked ~ section [for='star-2'] svg path, #star-5:checked ~ section [for='star-3'] svg path, #star-5:checked ~ section [for='star-4'] svg path, #star-5:checked ~ section [for='star-5'] svg path {
 fill: #FFBB00;
 stroke: #cc9600;
}
section {
 width: 300px;
 text-align: center;
 position: absolute;
 top: 50%;
 left: 50%;
 -webkit-transform: translate3d(-50%, -50%, 0);
 transform: translate3d(-50%, -50%, 0);

}
label {
 display: inline-block;
 width: 50px;
 text-align: center;
 cursor: pointer;
}
label svg {
 width: 100%;
 height: auto;
 fill: white;
 stroke: #CCC;
 -webkit-transform: scale(0.8);
 transform: scale(0.8);
 -webkit-transition: -webkit-transform 200ms ease-in-out;
 transition: -webkit-transform 200ms ease-in-out;
 transition: transform 200ms ease-in-out;
 transition: transform 200ms ease-in-out, -webkit-transform 200ms ease-in-out;
}
label svg path {
 -webkit-transition: fill 200ms ease-in-out, stroke 100ms ease-in-out;
 transition: fill 200ms ease-in-out, stroke 100ms ease-in-out;
}
label[for="star-null"] {
 display: block;
 margin: 0 auto;
 color: #999;
}