Estoy tratando de hacer un pequeño RATING
con css, estoy tratando de hacerlo de esta manera, pero tengo problemas con el tamaño de la imagen:
*{
margin: 0;
padding: 0;
}
.rate {
float: left;
height: 46px;
padding: 0 10px;
}
.rate:not(:checked) > input {
position:absolute;
top:-9999px;
}
.rate:not(:checked) > label {
float:right;
width:1em;
overflow:hidden;
white-space:nowrap;
cursor:pointer;
font-size:30px;
color:#ccc;
}
.rate:not(:checked) > label:before {
content: url(http://image.prntscr.com/image/bcdc244fb17643b6bbd75e95aa996faa.png);
}
.rate > input:checked ~ label {
content: url(http://image.prntscr.com/image/97645296892344039d1e21f91432c8f2.png);
}
.rate:not(:checked) > label:hover,
.rate:not(:checked) > label:hover ~ label {
color: #deb217;
}
.rate > input:checked + label:hover,
.rate > input:checked + label:hover ~ label,
.rate > input:checked ~ label:hover,
.rate > input:checked ~ label:hover ~ label,
.rate > label:hover ~ input:checked ~ label {
color: #c59b08;
}
<!DOCTYPE html>
<html >
<head>
<meta charset="UTF-8">
<title>5 star rating with css and html</title>
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<div class="rate">
<input type="radio" id="star5" name="rate" value="5" />
<label for="star5" title="text">5 stars</label>
<input type="radio" id="star4" name="rate" value="4" />
<label for="star4" title="text">4 stars</label>
<input type="radio" id="star3" name="rate" value="3" />
<label for="star3" title="text">3 stars</label>
<input type="radio" id="star2" name="rate" value="2" />
<label for="star2" title="text">2 stars</label>
<input type="radio" id="star1" name="rate" value="1" />
<label for="star1" title="text">1 star</label>
</div>
</body>
</html>
Como pueden ver imagen de las primeras estrellas (no seleccionadas), tiene problemas.