Звездный рейтинг для формы отзыва на Bootstrap

31/05/2021 Bootstrap, CSS, верстка, html

Открыть пример формы отзыва со звёздным рейтингом

CSS

Подключаем набор Font Awesome (если отсутствует).


<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">

Подключаем стили звёздного рейтинга, где #FFB300 — цвет звёзд.


.star-rating{
 font-size: 0;
}
.star-rating__wrap{
 display: inline-block;
 font-size: 1rem;
}
.star-rating__wrap:after{
 content: "";
 display: table;
 clear: both;
}
.star-rating__ico{
 float: right;
 padding-left: 2px;
 cursor: pointer;
 color: #FFB300;
}
.star-rating__ico:last-child{
 padding-left: 0;
}
.star-rating__input{
 display: none;
}
.star-rating__ico:hover:before,
.star-rating__ico:hover ~ .star-rating__ico:before,
.star-rating__input:checked ~ .star-rating__ico:before
{
 content: "\f005";
}

HTML-код звездного рейтинга

В форме отзыва для создания звёздной оценки применяется <input> со значением radio. Рейтинг от 1 (ужасно) до 5 (отлично).

Настройка атрибутов id="", for="" и name="" — по вкусу, в зависимости от вашей системы управления сайтом и настроек сервера.


<form>
.....
<div class="form-group">
<label>Ваша оценка</label>
<div class="star-rating">
<div class="star-rating__wrap">
<input class="star-rating__input" id="star-5" type="radio" name="rating" value="5">
<label class="star-rating__ico fa fa-star-o fa-lg" for="star-5" title="Отлично"></label>
<input class="star-rating__input" id="star-4" type="radio" name="rating" value="4">
<label class="star-rating__ico fa fa-star-o fa-lg" for="star-4" title="Хорошо"></label>
<input class="star-rating__input" id="star-3" type="radio" name="rating" value="3">
<label class="star-rating__ico fa fa-star-o fa-lg" for="star-3" title="Удовлетворительно"></label>
<input class="star-rating__input" id="star-2" type="radio" name="rating" value="2">
<label class="star-rating__ico fa fa-star-o fa-lg" for="star-2" title="Плохо"></label>
<input class="star-rating__input" id="star-1" type="radio" name="rating" value="1">
<label class="star-rating__ico fa fa-star-o fa-lg" for="star-1" title="Ужасно"></label>
</div>
</div>
</div>
.....
</form>

Социальные сети приучили пользователя сначала обращать внимание на количество лайков, а потом уже на контент. Соответственно, отзывы, как и накрутка лайков в ВКонтакте, позволяют получить приток заинтересованной аудитории.

Другие замётки в тему

Автор — Михаил Апсолямов
Создаю и продвигаю сайты с 2010 года. Провожу аудиты, настраиваю контекстную рекламу. Подробнее об услугах.