<div id="wrapper">
<form action="" method="post">
<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>
<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;
}
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.