Accessible Star Rating System In Pure CSS – Starability.css

Category: CSS & CSS3 , Recommended | August 18, 2018
Author: LunarLogic
Views Total: 7,952
Official Page: Go to website
Last Update: August 18, 2018
License: MIT

Preview:

Accessible Star Rating System In Pure CSS – Starability.css

Description:

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.

You Might Be Interested In:


One thought on “Accessible Star Rating System In Pure CSS – Starability.css

Leave a Reply