Стилизация рейтинга товара звездочками на HTML и CSS

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

1. HTML

Прописываем 5 инпутов с типом радио и лейблы к ним.

Располагаем их в последовательности, чтобы за каждым input шел его label.
Значения input в DOM дереве должно идти в порядке убывания (! важно).

Пример HTML:

<div class="rating_block">
  <input name="rating" value="5" id="rating_5" type="radio" />
  <label for="rating_5" class="label_rating"></label>

  <input name="rating" value="4" id="rating_4" type="radio" />
  <label for="rating_4" class="label_rating"></label>

  <input name="rating" value="3" id="rating_3" type="radio" />
  <label for="rating_3" class="label_rating"></label>

  <input name="rating" value="2" id="rating_2" type="radio" />
  <label for="rating_2" class="label_rating"></label>

  <input name="rating" value="1" id="rating_1" type="radio" />
  <label for="rating_1" class="label_rating"></label>
</div>

2. CSS

Весь блок (.rating_block) делаем высотой кратной 5 и шириной = высота * 5. Например: выста 25px, и ширина 125px. Инпуты скрываем через display: none;. Лейблы делаем шириной и высотой 25px, и даем им свойство float: right; (! важно). Таким образом у нас слева будет самый нижний лейбл из DOM дерева который с самым маленьким рейтингом.

Изготовляем изображение звездочек рейтинга. Лучше всего если это будет вертикальное изображение с двумя звездочками (вверху неактивная, внизу активная). Размеры должны быть: ширина = ширина лейбла, высота = высота лейбла * 2. В примере это 25px на 50px.

Пример CSS:

.rating_block {
  width: 125px;
  height: 25px;
}
.rating_block input[type="radio"] {
  display: none;
}
.label_rating {
  float: right;
  display: block;
  width: 25px;
  height: 25px;
  background: url(rating.png) no-repeat 50% 0;
  cursor: pointer;
}
/*Пишем правила смены положения background-а*/
.rating_block .label_rating:hover, /*Правило для ховера на текущий лейбл*/
.rating_block .label_rating:hover ~ .label_rating, /*Правило для всех следующих лейблов по DOM дереву*/
.rating_block input[type="radio"]:checked ~ .label_rating /*Правило для всех следующих лейблов после выбранного инпута, чтобы звездочки как бы зафиксировались*/
{
  background-position: 50% -25px;
}