two ways of star-rating using Css or Jquery

Star-rating is a popular function in interactive website,especially for movie and food.Here I learned two ways of star-rating , one of which is  using pure Css,and the other is a plugin called star-rating.js .

CSS rating demo:

Every star is a input radio type which has each label.
We will float the label right,so make sure the html value reversed.

html

css

css

In order to make the input invisible, you can set the input aboslute on the bottom of zoom 0. Labels are the words which should be hidden and bigger.And floating right is a way to rate stars from left to right. After hidden all the relevent labels, we want show the star shape before each of the label tag.

css

When hovering the stars, the color turns to green,even the same with the checked labels. After checked,the stars turn red .
When click the star, the one which is not checked will animate the transform scale.



Bootstrap star-rating demo:

The Jquery called bootstrap-star-rating is a customized rating plugin. The official Gitihub ,and  standard example  .

First,link library below:
css:
https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css
https://cdnjs.cloudflare.com/ajax/libs/bootstrap-star-rating/4.0.1/css/star-rating.min.css
js:
https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.2/jquery.min.js
https://cdnjs.cloudflare.com/ajax/libs/bootstrap-star-rating/4.0.1/js/star-rating.min.js

Then, the html based on bootstrap.

html

The point is setting a input and an id name. The value is a default rating.

css

For the second apple rating, I set a shadow on the bottom of png images when hovering the stars.

js

The first one is an default star-rating which changed the starCaptions for each one.
The second one is customized with images and starCaptions of numbers.

More options,events,methods here