Pure CSS star rating

Posted by Bjørn

Recently I was reading an article about a simple star rating system using vanilla JS, CSS and HTML. It got me thinking about whether it would be possible to recreate something similar with just CSS… and a tiny bit of HTML on the side.

You can see the result below and on CodePen, I think the code is self explanatory.

 

See the Pen Pure CSS Star Rating by Bjørn (@magikMaker) on CodePen.

 

In case you would like to send the selected rating back to a server, it’s very easy to get the selected star using this tiny JavaScript snippet:

document.querySelector('.rating').addEventListener('click', event => {
    // figure out which star was clicked
    const rating = Array
        .from(event.currentTarget.querySelectorAll('input'))
        .indexOf(event.target) + 1;
 
    // example: get the id 
    // const id = event.currentTarget.getAttribute('id').match(/\d+$/);
 
    // then somehow post the info to the server or save locally or...
    // post(`https://some-server.it/ratings/${id}`, {rating});
 });