CSS-only rating input

!css-only-rating-input.md

Rating Input Elaboration

Fiddling around with getting a rating input consisting of checkboxes rendered as stars to work with CSS only.

A Pen by Denny Christochowitz on CodePen.

License.

index.html

<div class="rating">
  <input type="radio" id="rating1" name="rating"/>
  <label for="rating1">star1</label>
  <input type="radio" id="rating2" name="rating"/>
  <label for="rating2">star2</label>
  <input type="radio" id="rating3" name="rating"/>
  <label for="rating3">star3</label>
  <input type="radio" id="rating4" name="rating"/>
  <label for="rating4">star4</label>
</div>

style.scss

$active: orange;
$new: gold;

.rating {
  display: flex;
  flex-direction: row-reverse;
  justify-content: flex-end;
  color: grey;
}

.rating > input {
  display: none;
}

.rating > label {
  font-size: 0;
}

.rating > label:before {
  font-size: 2rem; // wouldn't work with em, since em is always relative to the parent
  content: '★';
}

input:checked ~ label {
  color: $active;
}

.rating:hover > label {
  color: grey;
}

.rating:hover > label:hover,
.rating:hover > label:hover ~ label
{
  color: $new;
}