MoreLesson 183Free preview
Star Rating
This lesson is part of How To · All levels
Summary
This lesson discusses star ratings with CSS, typically using radio input and star-shaped labels. The radio approach makes ratings operable with a keyboard and only one score can be selected. Selector:checked combined with a specific sequence arrangement to color the selected star.
Key points
- Use the radio input with the same name to select only one value
- Connect the label to the input via the for attribute, and visually hide the input without removing it from the keyboard.
- Use the selected:checked and general sibling to color the stars
- Include the text of the rating value so that the information does not depend on the color of the stars alone
Full lesson
Code examples and quizzes
Full lessons, code examples, and quizzes are available to subscribers. 5 questions.