Author: | LunarLogic |
---|---|
Views Total: | 10,695 views |
Official Page: | Go to website |
Last Update: | August 18, 2018 |
License: | MIT |
Preview:

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.
Hey guys, how I do to ranking start without none star?