Поле формы для оценки из звездочек
Вариант с использованием звездочек из 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;}
На выходе получаем "голосовалку" из пяти звездочек.
