Pure CSS Star Rating Component

Category: CSS & CSS3 | February 5, 2017
Author: ahmedbeheiry
Views Total: 5,365
Official Page: Go to website
Last Update: February 5, 2017
License: MIT

Preview:

Pure CSS Star Rating Component

Description:

A small star rating component which uses Font Awesome for rating symbols, built using pure CSS and check inputs.

How to use it:

Load the needed Font Awesome iconic font in the header of the webpage.

<link rel="stylesheet" href="font-awesome.min.css">

Create 5 checkboxes & labels for the 5-star rating component.

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

Replace the checkboxes with star icons and style the rating component with the following CSS styles:

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

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

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

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

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

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

You Might Be Interested In:


3 thoughts on “Pure CSS Star Rating Component

  1. zehrer

    Like it – thx! But the “point” – to store and update the results – is missing!

    Reply
  2. Rasmus Schultz

    You used input type=checkbox – in the demo, the control “sticks”… you can’t change your rating. It should be input type=radio.

    Reply

Leave a Reply