.form-group {
height: 16px;
}
.form-group > input {
opacity: 0;
position: absolute;
}
.form-group > input + label {
background-image: url('Empty_Star.png');
background-repeat: no-repeat;
background-position: 0 0;
padding: 0 0 0 0;
display:block;
height: 16px;
vertical-align: middle;
line-height:16px;
}
.form-group > input[type=radio]:checked + label {
background-position: 0 0;
}
<form name="rating" class="form-group">
<input id="radio1" type="radio" name="rate" value="1"/>
<label for="radio1"></label>
<input id="radio2" type="radio" name="rate" value="2"/>
<label for="radio2"></label>
<input id="radio3" type="radio" name="rate" value="3"/>
<label for="radio3"></label>
<input id="radio4" type="radio" name="rate" value="4"/>
<label for="radio4"></label>
<input id="radio5" type="radio" name="rate" value="5"/>
<label for="radio5"></label>
</form>
Although I do not require labels, the tutorials I followed to replace radio buttons insisted on including them. If someone could provide guidance on how to remove them effectively, I would appreciate it. My primary concern is aligning each of the five star images side by side, as my attempts have been unsuccessful despite adjusting display options and referring to multiple tutorials. Thank you for any help!