Как их radiobutton сделать рейтинг?

Question

[Артем Колчин]

Ссылка на код

Есть такие 4 радиокнопок которые пытаюсь стилизовать под рейтинг. Не совсем понимаю как сделать так, что если нажать например на 3 звездочку, то закрасятся с первой по третью? и при наведении тоже.
Получается я скрываю input, а label задаю с помощью шрифта звездочку.

content: "\f155"; это закрашенная звездочка. А вот как ее закрасить ума не дам. Что не так делаю?

Comments

[Евгений]

туц

[Артем Колчин]

Евгений, смотрите, видео крутое! Но там он делает через background , а я хочу попробовать через псевдоэлементы.
Переделал, получилось так - ссылка
Но почему то остальные звезды при выборе к примеру 3 или 4 не меняются на красные.

[Артем Колчин]

Евгений, точнее так, почему то звездочки наводятся справа налево)

[Евгений]

Артем Колчин, я дал ссыль - чтобы вы посмотрели саму суть рейтинга через радиокнопки) а не переписали все с видюхи)

[Артем Колчин]

Евгений, ну я переписал с видюхи и разобрался) Спасибо)

Answer 1

[black1277]

вот пример, даже с кнопкой сброса рейтинга

Comments

[Артем Колчин]

Убрал label и сделал упрощенный вариант, но почему в вашем примере рейтинг идет в верстке html от 5 до 1, визуально.
Ну и в моем примере сейчас получается звездочки справа налево наводятся.

[black1277]

Артем Колчин, а какая разница? Ну поменял я местами, теперь нравится?