What does this CSS snippet do?

This CSS script creates an interactive, visually styled star rating system by hiding native radio buttons and using FontAwesome icons within labels to represent stars. The labels are floated to the right to reverse their order, enabling left-to-right filling when hovered or selected.

Stars (\f005) are shown using pseudo-elements (:before) with interactive styling such as font size, padding, and cursor changes. The script uses sibling selectors to apply yellow color (#f0d102) on hover or selection, with a brighter yellow (#f4ee28) for hovered states when a rating is already selected.

An additional style for .radio-buttons-demo enlarges the stars for demonstration purposes, resulting in a fully responsive, JavaScript-free rating UI.

HTML

<div class="radio-buttons-container radio-buttons-demo">

<input type="radio" id="rb_demo_star_5" name="rating" value="5" />
 <label for="rb_demo_star_5"></label>

<input type="radio" id="rb_demo_star_4" name="rating" value="4" />
 <label for="rb_demo_star_4"></label>

<input type="radio" id="rb_demo_star_3" name="rating" value="3" />
 <label for="rb_demo_star_3"></label>

<input type="radio" id="rb_demo_star_2" name="rating" value="2" />
 <label for="rb_demo_star_2"></label>

<input type="radio" id="rb_demo_star_1" name="rating" value="1" />
 <label for="rb_demo_star_1"></label>

</div>

CSS

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

CSS

.radio-buttons-container > input {
  display: none;
}

.radio-buttons-container > label {
  float: right;
}

.radio-buttons-container > label:before {
  display: inline-block;
  font-family: FontAwesome;
  font-size: 1.2rem;
  padding: 0.3rem 0.2rem;
  margin: 0;
  cursor: pointer;
  content: "\f005 ";

input:checked ~ label, label:hover, label:hover ~ label {
  color: #f0d102;
}

input:checked + label:hover, input:checked ~ label:hover, input:checked ~ label:hover ~ label, label:hover ~ input:checked ~ label {
  color: #f4ee28;
}

.radio-buttons-demo > label:before {
  font-size: 2.2rem;
  padding: 0.4rem 0.3rem;
}

HTML and CSS

Radio buttons as rating stars

What does this CSS snippet do?

About the author