Componente de calificación de estrellas CSS puro

Vista prévia

Descripción

Un pequeño componente de clasificación de estrellas que utiliza Font awesome para los símbolos de clasificación, construido usando CSS puro y entradas de cheques.

Funcionamiento

Cargue la fuente icónica Font awesome necesaria en el encabezado de la Página Web.

<link rel="stylesheet" href="font-awesome.min.css">

Cree 5 casillas de verificación & etiquetas para el componente de calificación de 5 estrellas.

<input type="checkbox" id="st1" value="1" />
<label for="st1"></label>
<input type="checkbox" id="st2" value="2" />
<label for="st2"></label>
<input type="checkbox" id="st3" value="3" />
<label for="st3"></label>
<input type="checkbox" id="st4" value="4" />
<label for="st4"></label>
<input type="checkbox" id="st5" value="5" />
<label for="st5"></label>

Reemplace las casillas de verificación por iconos de estrella y estile el componente de clasificación con los siguientes estilos CSS:

input {

border: 0;

width: 1px;

height: 1px;

overflow: hidden;

position: absolute !important;

clip: rect(1px 1px 1px 1px);

clip: rect(1px, 1px, 1px, 1px);

opacity: 0;
}

label {

position: relative;

float: right;

color: #C8C8C8;
}

label:before {

margin: 5px;

content: "\f005";

font-family: FontAwesome;

display: inline-block;

font-size: 1.5em;

color: #ccc;

-webkit-user-select: none;

-moz-user-select: none;

user-select: none;
}

input:checked ~ label:before {

color: #FFC107;
}

label:hover ~ label:before {

color: #ffdb70;
}

label:hover:before {

color: #FFC107;
}