Accessible rating forms with cute animations on top. Name is the combination of two words: star and accessibility (or ability in general, whatever pleases you). Starability ratings are done in pure HTML and CSS, and are accessible by keyboard, so even people using screen readers are able to use it. To achieve this effect I am using sibling combinators technique that was introduced by Lea Verou in "Accessible star rating widget with pure CSS" blogpost. The goal of this small library was to combine this technique with neat animations and make it easy to quickly apply it to your website.
Remember: to submit the data you will need to add a bit of your own code. Here we have just a fieldset with collection of radio buttons, neatly styled.
You can check how Starability.css looks here.
This step by step tutorial is based on an assumption that your file structure in project directory looks as it follows:
- index.html
- /css
- css file with chosen rating (eg.: starability-fade.min.css)
- /starability-images
- icons.png
- [email protected]
- icons-checkmark.png (include this file if you are going to use checkmark rating)
- [email protected] (include this file if you are going to use checkmark rating)
If you have different file structure, remember to update file paths for icons (in css files) and css stylesheet link (in HTML ).
-
Copy the structure of HTML (fieldset and insides), to make sure the styles work correctly. If you want more than one rating widget on the same page, remember that the id's need to be different for each radio buttons collection:
<fieldset class="starability-basic"> <legend>First rating:</legend> <input type="radio" id="first-rate5" name="rating" value="5" /> <label for="first-rate5" title="Amazing">5 stars</label> <input type="radio" id="first-rate4" name="rating" value="4" /> <label for="first-rate4" title="Very good">4 stars</label> <input type="radio" id="first-rate3" name="rating" value="3" /> <label for="first-rate3" title="Average">3 stars</label> <input type="radio" id="first-rate2" name="rating" value="2" /> <label for="first-rate2" title="Not good">2 stars</label> <input type="radio" id="first-rate1" name="rating" value="1" /> <label for="first-rate1" title="Terrible">1 star</label> </fieldset> <fieldset class="starability-basic"> <legend>Second rating:</legend> <input type="radio" id="second-rate5" name="rating" value="5" /> <label for="second-rate5" title="Amazing">5 stars</label> <input type="radio" id="second-rate4" name="rating" value="4" /> <label for="second-rate4" title="Very good">4 stars</label> <input type="radio" id="second-rate3" name="rating" value="3" /> <label for="second-rate3" title="Average">3 stars</label> <input type="radio" id="second-rate2" name="rating" value="2" /> <label for="second-rate2" title="Not good">2 stars</label> <input type="radio" id="second-rate1" name="rating" value="1" /> <label for="second-rate1" title="Terrible">1 star</label> </fieldset>
-
Add a stylesheet with a name of an animation works best for your app name inside your website's element. There are the minified versions or standard css files. Let's say we want fading animation:
<head> <link rel="stylesheet" type="text/css" href="css/starability-fade.min.css"/> </head>
If you wish to use more than one animation per website (better stick to one!), you can include the file with all of the animations combined:
<head> <link rel="stylesheet" type="text/css" href="css/starability-all.min.css"/> </head>
-
Add chosen rating version class name to the fieldset element in your HTML. For our fading animation you would have to add '.starability-fade' class:
<fieldset class="starability-fade">
-
Include icon files in your images directory. CSS files use a relative path "../images/icons.png". You might want to change that if your file structure looks different than one proposed at the top.
For now you can choose one of versions listed below. Go to demo to see how they look.
- starability-basic
- starability-slot
- starability-grow
- starability-growRotate
- starability-fade
- starability-checkmark
Starability.css works in IE10+ and all modern browsers. If you want to support browsers below IE10, you should disable animations for them for example using Modernizr.
This rating system by default reacts to :hover, changing background image position. This is an operation that causes webiste repaints. If you want to make your website as light as possible, you can remove declaration that will highlight stars on hover:
.starability-fade > input:hover ~ label {
background-position: 0 -30px;
}If you are verse with SASS you can easily adjust rating widget to your needs, e.g. have 10 star based system or turn off outline and hover. It can be done by setting true/false values to the variables in _variables.scss file and running gulp task to process files. Of course to have 10 stars system you also need add additional radio inputs in your HTML.
If you are not using scss syntax, you can also have a 10 star based system. Just remember to change width of the fieldset element in your css, so that the stars would all fit it (for example for 10 stars width of fieldset should be 10x width of a star, so 300px).
Check what was changed in the newest version in the Changelog.
The library is licensed under The MIT License (MIT).
Go to Lunar Logic website to learn more about us and our work.
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent