Control de clasificación de estrellas basado en la entrada de radio con CSS puro

Vista prévia

Descripción

Un simple, llano, CSS sólo 5 estrellas control construido usando botones de radio y el carácter Unicode ' Star '.

Funcionamiento

Cargue la hoja de estilos principal 5star. CSS en el encabezado del documento HTML.

<link rel="stylesheet" href="styles/5star.css">

Cree 5 entradas de radio para el control de clasificación.

<ul class="rate-area">

<input type="radio" id="5-star" name="rating" value="5" /><label for="5-star" title="Amazing">5 stars</label>

<input type="radio" id="4-star" name="rating" value="4" /><label for="4-star" title="Good">4 stars</label>

<input type="radio" id="3-star" name="rating" value="3" /><label for="3-star" title="Average">3 stars</label>

<input type="radio" id="2-star" name="rating" value="2" /><label for="2-star" title="Not Good">2 stars</label>

<input type="radio" id="1-star" name="rating" value="1" /><label for="1-star" title="Bad">1 star</label>
</ul>

Eso es todo. Reemplace los estilos de clasificación predeterminados en el ' 5star. css ' a su gusto.

.rate-area {

float: left;

border-style: none;
}

.rate-area:not(:checked) > input {

position: absolute;

top: -9999px;

clip: rect(0,0,0,0);
}

.rate-area:not(:checked) > label {

float: right;

width: 1em;

padding: 0 .1em;

overflow: hidden;

white-space: nowrap;

cursor: pointer;

font-size: 400%;

line-height: 1.2;

color: lightgrey;

text-shadow: 1px 1px #bbb;
}

.rate-area:not(:checked) > label:before { content: '★ '; }

.rate-area > input:checked ~ label {

color: gold;

text-shadow: 1px 1px #c60;

font-size: 450% !important;
}

.rate-area:not(:checked) > label:hover, .rate-area:not(:checked) > label:hover ~ label { color: gold; }

.rate-area > input:checked + label:hover, .rate-area > input:checked + label:hover ~ label, .rate-area > input:checked ~ label:hover, .rate-area > input:checked ~ label:hover ~ label, .rate-area > label:hover ~ input:checked ~ label {

color: gold;

text-shadow: 1px 1px goldenrod;
}

.rate-area > label:active {

position: relative;

top: 2px;

left: 2px;
}