<div id="wrapper">
  <form action="" method="post">
    <p class="clasificacion">
       <input id="radio1" type="radio" name="estrellas" value="5"><!--
      --><label for="radio1">&#9733;</label><!--
      --><input id="radio2" type="radio" name="estrellas" value="4"><!--
      --><label for="radio2">&#9733;</label><!--
      --><input id="radio3" type="radio" name="estrellas" value="3"><!--
      --><label for="radio3">&#9733;</label><!--
      --><input id="radio4" type="radio" name="estrellas" value="2"><!--
      --><label for="radio4">&#9733;</label><!--
      --><input id="radio5" type="radio" name="estrellas" value="1"><!--
      --><label for="radio5">&#9733;</label>
    </p>
    <p>
      <input type="submit" value="submit" name="submit" />
    </p>
  </form>
</div>
<div>

</div>
*{font-family:"Courier New", Courier, monospace}
form {
  width: 250px;
  margin: 10px auto;
  padding: 10px;
  border: 1px solid #d9d9d9;
}

form p,
form input[type="submit"] {
  text-align: center;
  font-size: 20px;
}

#wrapper form input[type="submit"] {
  border: 1px solid #d9d9d9;
  background-color: #efefef;
}

input[type="radio"] {
  display: none;
}

label {
  color: grey;
}

.clasificacion {
  direction: rtl;
  unicode-bidi: bidi-override;
}

label:hover,
label:hover ~ label {
  color: orange;
}

input[type="radio"]:checked ~ label {
  color: orange;
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.