.rating {
  float:left;
  margin-bottom: 5px
}

.rating:not(:checked) > input {
  position:absolute;
  top:-9999px;
  clip:rect(0,0,0,0);
}

.rating:not(:checked) > label {
  float:right;
  padding:0 .1em;
  overflow:hidden;
  white-space:nowrap;
  cursor:pointer;
  font-size:22px;
  line-height:1.2;
  color:#ddd;
}

.rating:not(:checked) > label:before {
  content: ★
}

.rating > input:checked ~ label {
  color: #ff7700;
}

.rating:not(:checked) > label:hover,
.rating:not(:checked) > label:hover ~ label {
  color: gold;
}

.rating> input:checked + label:hover,
.rating> input:checked + label:hover ~ label,
.rating> input:checked ~ label:hover,
.rating> input:checked ~ label:hover ~ label,
.rating> label:hover ~ input:checked ~ label {
  color: #ea0;
}

.rating > label:active {
  position:relative;
  top:2px;
  left:2px;
}