Accessible Star Rating System In Pure CSS – Starability.css

Just another simple, animated, fully accessible star rating system built on top of pure CSS, radio buttons and sprite images.

Basic usage:

You first need to load the Starability.css in the header of your html page.

 <link rel="stylesheet" href="starability-all.min.css">

The html structure to create a basic star rating system. Change starability-basic to different class to see animations.

• starability-basic
• starability-slot
• starability-grow
• starability-growRotate
• starablity-fade
• starability-checkmark

<form>
  <fieldset class="starability-basic"> 
    <legend>Basic star rating:</legend>
    <input type="radio" id="rate5" name="rating" value="5" />
    <label for="rate5" title="Amazing">5 stars</label>
    <input type="radio" id="rate4" name="rating" value="4" />
    <label for="rate4" title="Very good">4 stars</label>
    <input type="radio" id="rate3" name="rating" value="3" />
    <label for="rate3" title="Average">3 stars</label>
    <input type="radio" id="rate2" name="rating" value="2" />
    <label for="rate2" title="Not good">2 stars</label>
    <input type="radio" id="rate1" name="rating" value="1" />
    <label for="rate1" title="Terrible">1 star</label>
  </fieldset>
</form>

Changelog:

v2.4.1 (08/19)

• Add support for high contrast mode on Windows.