Поле формы для оценки из звездочек
Вариант с использованием звездочек из FontAwesome5:
<span class="star-box form-control">
<? for($i = 5; $i > 0; $i--): ?>
<input type="radio" name="comment[score]" id="formCommentScore<?= $i; ?>" value="<?= $i; ?>">
<label for="formCommentScore<?= $i; ?>">
<? endfor; ?>
<? for($i = 5; $i > 0; $i--): ?>
<i class="fas fa-star on"></i>
<i class="far fa-star off"></i>
</label>
<? endfor; ?>
</span>
На выходе получаем такую структуру:
<span class="star-box form-control">
<input name="comment[score]" id="formCommentScore5" value="5" type="radio">
<label for="formCommentScore5">
<input name="comment[score]" id="formCommentScore4" value="4" type="radio">
<label for="formCommentScore4">
<input name="comment[score]" id="formCommentScore3" value="3" type="radio">
<label for="formCommentScore3">
<input name="comment[score]" id="formCommentScore2" value="2" type="radio">
<label for="formCommentScore2">
<input name="comment[score]" id="formCommentScore1" value="1" type="radio">
<label for="formCommentScore1">
<i class="fas fa-star on"></i>
<i class="far fa-star off"></i>
</label>
<i class="fas fa-star on"></i>
<i class="far fa-star off"></i>
</label>
<i class="fas fa-star on"></i>
<i class="far fa-star off"></i>
</label>
<i class="fas fa-star on"></i>
<i class="far fa-star off"></i>
</label>
<i class="fas fa-star on"></i>
<i class="far fa-star off"></i>
</label>
</span>
Привязываем примерно следующие стили:
.star-box label {
margin: 0;
cursor: pointer;
}
.star-box input,
.star-box .on {
display: none;
}
.star-box input:checked + label .on {
display: inline;
}
.star-box input:checked + label .off {
display: none;
}
На выходе получаем "голосовалку" из пяти звездочек.