Radio Input Based Star Rating Control With Pure CSS

Preview:

Description:

A simple, plain, CSS only 5-star rating control built using radio buttons and  Unicode character ‘Star’.

How to use it:

Load the core stylesheet 5star.css in the header of the html document.

<link rel="stylesheet" href="styles/5star.css">

Create 5 radio inputs for the rating control.

<ul class="rate-area">
  <input type="radio" id="5-star" name="rating" value="5" /><label for="5-star" title="Amazing">5 stars</label>
  <input type="radio" id="4-star" name="rating" value="4" /><label for="4-star" title="Good">4 stars</label>
  <input type="radio" id="3-star" name="rating" value="3" /><label for="3-star" title="Average">3 stars</label>
  <input type="radio" id="2-star" name="rating" value="2" /><label for="2-star" title="Not Good">2 stars</label>
  <input type="radio" id="1-star" name="rating" value="1" /><label for="1-star" title="Bad">1 star</label>
</ul>

That’s it. Override the default rating styles in the ‘5star.css’ to your taste.

.rate-area {
  float: left;
  border-style: none;
}
.rate-area:not(:checked) > input {
  position: absolute;
  top: -9999px;
  clip: rect(0,0,0,0);
}
.rate-area:not(:checked) > label {
  float: right;
  width: 1em;
  padding: 0 .1em;
  overflow: hidden;
  white-space: nowrap;
  cursor: pointer;
  font-size: 400%;
  line-height: 1.2;
  color: lightgrey;
  text-shadow: 1px 1px #bbb;
}
.rate-area:not(:checked) > label:before { content: '★ '; }
.rate-area > input:checked ~ label {
  color: gold;
  text-shadow: 1px 1px #c60;
  font-size: 450% !important;
}
.rate-area:not(:checked) > label:hover, .rate-area:not(:checked) > label:hover ~ label { color: gold; }
.rate-area > input:checked + label:hover, .rate-area > input:checked + label:hover ~ label, .rate-area > input:checked ~ label:hover, .rate-area > input:checked ~ label:hover ~ label, .rate-area > label:hover ~ input:checked ~ label {
  color: gold;
  text-shadow: 1px 1px goldenrod;
}
.rate-area > label:active {
  position: relative;
  top: 2px;
  left: 2px;
}