-1

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.

1 respuesta 1

2

solo cambie

.rate:not(:checked) > label:before 

por

.rate > label

*{
    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;
    white-space:nowrap;
    cursor:pointer;
    font-size:30px;
    color:#ccc;
}

.rate > label {
    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>

1

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.