Skip to main content
se añadieron 80 caracteres en el cuerpo
Origen Enlace
Alvaro Montoro
  • 49.8k
  • 28
  • 109
  • 190

Esto es algo que puedes conseguir simplemente aplicando CSS al HTML que ya tienes, sin necesidad de hacer cambios en el PHP o HTML o JS. La idea sería usar el selector contiguo (~) para cambiar el color a las estrellas (label) que se encuentren después del input marcado.

Le he quitado los comentarios para que se vea algo más limpio, y le he agregado estilos para obtener el mismo efecto:

p.clasificacion {
  position: relative;
  overflow: hidden;
  display: inline-block;
}

p.clasificacion input {
  position: absolute;
  top: -100px;
}

p.clasificacion label {
  float: right;
  color: #333;
}

p.clasificacion label:hover,
p.clasificacion label:hover ~ label,
p.clasificacion input:checked ~ label {
  color: #dd4;
}
<p class="clasificacion">
  <input id="radio1" type="radio" name="estrellas" value="5">
  <label for="radio1">★</label>
  <input id="radio2" type="radio" name="estrellas" value="4">
  <label for="radio2">★</label>
  <input id="radio3" type="radio" name="estrellas" value="3">
  <label for="radio3">★</label>
  <input id="radio4" type="radio" name="estrellas" value="2">
  <label for="radio4">★</label>
  <input id="radio5" type="radio" name="estrellas" value="1">
  <label for="radio5">★</label>
</p>

Esto es algo que puedes conseguir simplemente aplicando CSS al HTML que ya tienes, sin necesidad de hacer cambios en el PHP o HTML o JS. La idea sería usar el selector contiguo (~) para cambiar el color a las estrellas (label) que se encuentren después del input marcado.

Le he quitado los comentarios para que se vea algo más limpio, y le he agregado estilos para obtener el mismo efecto:

p.clasificacion {
  position: relative;
  overflow: hidden;
  display: inline-block;
}

p.clasificacion input {
  position: absolute;
  top: -100px;
}

p.clasificacion label {
  float: right;
  color: #333;
}

p.clasificacion input:checked ~ label {
  color: #dd4;
}
<p class="clasificacion">
  <input id="radio1" type="radio" name="estrellas" value="5">
  <label for="radio1">★</label>
  <input id="radio2" type="radio" name="estrellas" value="4">
  <label for="radio2">★</label>
  <input id="radio3" type="radio" name="estrellas" value="3">
  <label for="radio3">★</label>
  <input id="radio4" type="radio" name="estrellas" value="2">
  <label for="radio4">★</label>
  <input id="radio5" type="radio" name="estrellas" value="1">
  <label for="radio5">★</label>
</p>

Esto es algo que puedes conseguir simplemente aplicando CSS al HTML que ya tienes, sin necesidad de hacer cambios en el PHP o HTML o JS. La idea sería usar el selector contiguo (~) para cambiar el color a las estrellas (label) que se encuentren después del input marcado.

Le he quitado los comentarios para que se vea algo más limpio, y le he agregado estilos para obtener el mismo efecto:

p.clasificacion {
  position: relative;
  overflow: hidden;
  display: inline-block;
}

p.clasificacion input {
  position: absolute;
  top: -100px;
}

p.clasificacion label {
  float: right;
  color: #333;
}

p.clasificacion label:hover,
p.clasificacion label:hover ~ label,
p.clasificacion input:checked ~ label {
  color: #dd4;
}
<p class="clasificacion">
  <input id="radio1" type="radio" name="estrellas" value="5">
  <label for="radio1">★</label>
  <input id="radio2" type="radio" name="estrellas" value="4">
  <label for="radio2">★</label>
  <input id="radio3" type="radio" name="estrellas" value="3">
  <label for="radio3">★</label>
  <input id="radio4" type="radio" name="estrellas" value="2">
  <label for="radio4">★</label>
  <input id="radio5" type="radio" name="estrellas" value="1">
  <label for="radio5">★</label>
</p>

Origen Enlace
Alvaro Montoro
  • 49.8k
  • 28
  • 109
  • 190

Esto es algo que puedes conseguir simplemente aplicando CSS al HTML que ya tienes, sin necesidad de hacer cambios en el PHP o HTML o JS. La idea sería usar el selector contiguo (~) para cambiar el color a las estrellas (label) que se encuentren después del input marcado.

Le he quitado los comentarios para que se vea algo más limpio, y le he agregado estilos para obtener el mismo efecto:

p.clasificacion {
  position: relative;
  overflow: hidden;
  display: inline-block;
}

p.clasificacion input {
  position: absolute;
  top: -100px;
}

p.clasificacion label {
  float: right;
  color: #333;
}

p.clasificacion input:checked ~ label {
  color: #dd4;
}
<p class="clasificacion">
  <input id="radio1" type="radio" name="estrellas" value="5">
  <label for="radio1">★</label>
  <input id="radio2" type="radio" name="estrellas" value="4">
  <label for="radio2">★</label>
  <input id="radio3" type="radio" name="estrellas" value="3">
  <label for="radio3">★</label>
  <input id="radio4" type="radio" name="estrellas" value="2">
  <label for="radio4">★</label>
  <input id="radio5" type="radio" name="estrellas" value="1">
  <label for="radio5">★</label>
</p>