StarRating-Pure-CSS is a simple, plain, CSS-only 5-star control built with radio buttons and the Unicode “Star” character.

radio button rating system, star rating radio buttons css, radio button star rating, star rating radio button jquery, simple 5 star rating system with css and html radios

Create A Simple Star Rating System Using JavaScript

How to make use of it:

1. Load the basic stylesheet 5star.css into the header of the HTML document.

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

2. Create 5 radio inputs to control the rating.

<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>

3. Override the default rating patterns in “5star.css”.

.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;
}

Radio Input Based Star Rating Control, star rating pure css Plugin/Github, star button in html

See Demo And Download

Official Website(mattcraigfleming): Click Here

This superior jQuery/javascript plugin is developed by mattcraigfleming. For extra advanced usage, please go to the official website.