Star Rating Control Based On Radio Inputs With Pure CSS

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>

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.

Related Posts


Responsive FAQ Accordion Dropdown In HTML and CSS

How to create responsive accordion Expandable and Collapsible Frequently Asked Questions Elements. Accordion HTML, is an easy and seamless accordion FAQ component built with CSS and HTML…


How To Create A Popup in HTML with CSS

How to create popup in html with css – Popup without JavaScript is an elegant pop-up panel component with an animated scale, written in CSS. Have you…


Simple Popup Box In Vanilla JavaScript | Creativa – Popup

Vanilla JS Popup is a simple library that allows you to create great popups for importing just one JavaScript file. Creativa is a lightweight, easy-to-use, customizable, responsive popup…


How to Create a Skeleton Screen Loading In Pure CSS

Skeleton Screen CSS is a complete set of elements for a hierarchical screen consisting of pure CSS. The source includes scss and compiled thumbnail and non-thumbnail CSS…


How to Create Pure CSS Toggle Switches With Checkboxes | Toggle Switchy

Toggle Switchy is a pure CSS library that converts the native checkbox inputs into responsive, accessible, Search engine optimization-friendly toggle switches with customized kinds, sizes, colors, labels,…


How to Add Floating Whatsapp Chat Button In HTML | venom-button

Venom Button is a very simple plugin for the jQuery floating WhatsApp button. Adds a floating button to your site that calls WhatsApp Click to Chat API. It will automatically start the WhatsApp…

Leave a Reply

Your email address will not be published. Required fields are marked *