Create Simple Star Rating using Pure CSS with HTML Radio Button


In this post I am going share simple and quick code snippet to Create Simple Star Rating using Pure CSS with HTML Radio Button. The code written by jexordexan. You don’t need any third party jQuery plugin to create star rating system for your project. The few lines of CSS code can make awesome rating system it simply convert HTML radio button into rating stars using Font Awesome Star Icons.


Only need to include fontawesome libraries in your project to create start rating system.

<link rel="stylesheet" href="">


Now copy below CSS and paste in your project to convert simple HTML radio buttons to star rating on mouse over selection.

@import url(,100,300,700,400);
  width: 270px;
  display: inline-block;
  display: none;
} {
  float: right;
  padding: 10px;
  font-size: 36px;
  color: #444;
  transition: all .2s;
} ~ {
  color: #FD4;
  transition: all .25s;
} ~ {
  text-shadow: 0 0 20px #952;
} ~ {
  color: #F62;
  transform: rotate(-15deg) scale(1.3);
  font-family: FontAwesome;
  overflow: hidden;
  height: 0;
  width: 100%;
  transition: all .25s;
  background: #222;
  border: none;
  width: 100%;
  max-width: 100%;
  height: 100px;
  padding: 10px;
  box-sizing: border-box;
  color: #EEE;
  display: block;
  transition:opacity .25s;
} ~ .rev-box{
  height: 125px;
  overflow: visible;


Create HTML radio button ration container.

<div class="stars">
<form action="">
  <input class="star star-5" id="star-5" type="radio" name="star"/>
  <label class="star star-5" for="star-5"></label>
  <input class="star star-4" id="star-4" type="radio" name="star"/>
  <label class="star star-4" for="star-4"></label>
  <input class="star star-3" id="star-3" type="radio" name="star"/>
  <label class="star star-3" for="star-3"></label>
  <input class="star star-2" id="star-2" type="radio" name="star"/>
  <label class="star star-2" for="star-2"></label>
  <input class="star star-1" id="star-1" type="radio" name="star"/>
  <label class="star star-1" for="star-1"></label>

See live demo and download source code.