Star-rating using Unicode stars

You might not have known this but over the past week there has been a shadow war taking place right here, on Dev, ok it’s not that serious but a few people have been released posts about how to make star rating components with html and css (and JS if y…

You might not have known this but over the past week there has been a shadow war taking place right here, on Dev, ok it’s not that serious but a few people have been released posts about how to make star rating components with html and css (and JS if you need it), the only rule is the component must be accessible.

The articles that have participated so far are;

If you want to get involved feel free to make a post in a similar vain to this and I’m sure we’ll be happy to look at what you’ve made and give some feedback.

Right, let’s get on with my post. The three versions I mentioned so far are all great but they all draw their own stars using CSS, which is fine, but we have stars in unicode already!! We have a filled star (★) and, I think that’s all we’ll need.



Why is accessibility important?

When you build something for the web, or in fact for any platform, your main aim to solve a problem, that problem maybe just getting information into the hands of the masses or it might be something bigger like managing restaurant bookings. As the aim is to solve problems it’s not great to create a whole host of new problems for people that may not be able to access your platform in a ‘normal’ manor. Because of this the WCAG (Web Content Accessibility Guidelines) were created meaning the web can be utilised by as many people as possible.



The code

My HTML is not too dissimilar to @inhuofficial
‘s this is because, honestly, their method was pretty much how I do star ratings in the real world. One place where we do vary though is CSS because, as I mentioned, everyone used svgs and gradients to make their stars but we’ll be taking a different route. A place I use time and time again is w3 and for star ratings this tutorial.



The ‘star’ html

Each one of my stars is made up of 5 lines of html the input holds the ‘state’ of which star is selected and the label makes a clickable area which we can style to look like out star. You’ll noticed the label and input are connected using the input’s id.

There is also a span with the class hide-visually this is a class that allows screen readers to read the contents but hides it from sight so a someone not using a screen reader won’t see it.

<input name="rating" value="1" type="radio" id="rating1">
<label for="rating1">
  <span class="hide-visually">1 Star</span>
  <span role="presentation" class="star"></span>
</label>



The ‘star’ css

The hide-visually class takes the item and makes it almost completely invisible, prevents the mouse/pointer from being able to interact with it and also takes it out of the dom’s normal flow by using position absolute.

.hide-visually,
.star-rating>input {
  opacity: 0.0000001;
  pointer-events: none;
  position: absolute;
}

The actual stars are using befores in order to change the content depending on input state or hover state. This allows us to give lots of nice styles based on user interaction.

.star-rating>label {
  -webkit-text-stroke: 2px black;
}

.star-rating input~label>span.star::before {
  content: '★';
}

.star-rating input:checked~label>span.star::before,
.star-rating>label:hover~input~label>span.star::before {
  color: #fff;
}

.star-rating span.star::before,
.star-rating:hover>input+label>span.star::before,
.star-rating>input:checked+label>span.star::before,
.star-rating>input~label:hover>span.star::before {
  color: gold;
}

.star-rating>input~label:hover>span.star::before {
  color: orange;
}



Putting it together

Each set of stars is wrapped in a fieldset this is done to make listening for changes easier, you can listen for changes once per fieldset rather than on each input.

I’ve also included a 0 star input and label but they’re hidden. If we wanted we could show the 0 star and give it a clear icon to imply pressing it clears all stars.

There are also some other styles to make all the stars layout nicely but I don’t think these styles are that interesting and you can change them if you wanted to make your own version.



The result

The joy of using unicode is we can just swap out the star with any supported shape like a heart or even a phone.



Signing off

And that’s it, any questions or feedback feel free to leave it in the comments below and be sure to check out the other posts in the ‘war’.

For anyone who’s a beginner and just looking at how to do things is it helpful to see several different people solve the same problem in their own ways each explaining why they did it that way?

Thanks for reading ?❤️??‍♂️?‍♂️???‍♂️??


Print Share Comment Cite Upload Translate
APA
Andrew Bone | Sciencx (2024-03-29T02:38:11+00:00) » Star-rating using Unicode stars. Retrieved from https://www.scien.cx/2021/07/05/star-rating-using-unicode-stars/.
MLA
" » Star-rating using Unicode stars." Andrew Bone | Sciencx - Monday July 5, 2021, https://www.scien.cx/2021/07/05/star-rating-using-unicode-stars/
HARVARD
Andrew Bone | Sciencx Monday July 5, 2021 » Star-rating using Unicode stars., viewed 2024-03-29T02:38:11+00:00,<https://www.scien.cx/2021/07/05/star-rating-using-unicode-stars/>
VANCOUVER
Andrew Bone | Sciencx - » Star-rating using Unicode stars. [Internet]. [Accessed 2024-03-29T02:38:11+00:00]. Available from: https://www.scien.cx/2021/07/05/star-rating-using-unicode-stars/
CHICAGO
" » Star-rating using Unicode stars." Andrew Bone | Sciencx - Accessed 2024-03-29T02:38:11+00:00. https://www.scien.cx/2021/07/05/star-rating-using-unicode-stars/
IEEE
" » Star-rating using Unicode stars." Andrew Bone | Sciencx [Online]. Available: https://www.scien.cx/2021/07/05/star-rating-using-unicode-stars/. [Accessed: 2024-03-29T02:38:11+00:00]
rf:citation
» Star-rating using Unicode stars | Andrew Bone | Sciencx | https://www.scien.cx/2021/07/05/star-rating-using-unicode-stars/ | 2024-03-29T02:38:11+00:00
https://github.com/addpipe/simple-recorderjs-demo