Star Rating | Pure CSS

index.html

<div class="content">
  <h1>5 Stars Rate</h1>
  <span><i class="fa fa-star"></i></span>
  <p>Pure CSS!</p>
</div>

<div class="wrapper">
  <input type="checkbox" id="st1" value="1" />
  <label for="st1"></label>
  <input type="checkbox" id="st2" value="2" />
  <label for="st2"></label>
  <input type="checkbox" id="st3" value="3" />
  <label for="st3"></label>
  <input type="checkbox" id="st4" value="4" />
  <label for="st4"></label>
  <input type="checkbox" id="st5" value="5" />
  <label for="st5"></label>
</div>

star-rating-pure-css.markdown

Star Rating | Pure CSS

Awesome Star Rating using Pure CSS!

Just hover over the star and give it a rate. Just like that!

To change your rate all you have to do is to click again on the star you clicked before to give the rate it'll clear the rate ( return all stars not selected ) so you can rate again ;)

A Pen by ahmed beheiry on CodePen.

License.

style.css

.content {
  text-align: center;
}
.content h1 {
  font-family: 'Sansita', sans-serif;
  letter-spacing: 1px;
  font-size: 50px;
  color: #282828;
  margin-bottom: 10px;
}
.content  i {
  color: #FFC107;
}
.content span {
  position: relative;
  display: inline-block;
}
.content  span:before, .content  span:after {
  position: absolute;
  content: "";
  background-color: #282828;
  width: 40px;
  height: 2px;
  top: 40%;
}
.content  span:before {
  left: -45px;
}
.content  span:after {
  right: -45px;
}
.content p {
  font-family: 'Open Sans', sans-serif;
  font-size: 18px;
  letter-spacing: 1px;
}
.wrapper {
  position: relative;
  display: inline-block;
  border: none;
  font-size: 14px;
  margin: 50px auto;
  left: 50%;
  transform: translateX(-50%);
}

.wrapper input {
  border: 0;
  width: 1px;
  height: 1px;
  overflow: hidden;
  position: absolute !important;
  clip: rect(1px 1px 1px 1px);
  clip: rect(1px, 1px, 1px, 1px);
  opacity: 0;
}

.wrapper label {
  position: relative;
  float: right;
  color: #C8C8C8;
}

.wrapper label:before {
  margin: 5px;
  content: "\f005";
  font-family: FontAwesome;
  display: inline-block;
  font-size: 1.5em;
  color: #ccc;
  -webkit-user-select: none;
  -moz-user-select: none;
  user-select: none;
}

.wrapper input:checked ~ label:before {
  color: #FFC107;
}

.wrapper label:hover ~ label:before {
  color: #ffdb70;
}

.wrapper label:hover:before {
  color: #FFC107;
}

styles

<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" />