Here I am with my "Star rating" system:
✔️ No JavaScript.
✔️ No complex HTML code, only the needed <input> elements for the user interaction and one extra element.
✔️ No hacky CSS code.
✔️ Easily scalable. Simply add more <input> to get more stars. No need to change any CSS code.
✔️ Works with keyboard navigation.
✔️ No SVG, No images. The star shape is built using pure CSS.
✔️ You can easily adjust the size and coloration of the stars.
✔️ Support both ltr and rtl direction
See it in play:
As said, the HTML code is pretty simple. A div that contains our inputs and an extra <i> element. Nothing more!
All you have to do is to add as many inputs as stars you want.
For the CSS part, we have the trivial one as follow:
.stars {
--s:50px;
position:relative;
display:inline-flex;
}
.stars input {
width:var(--s);
height:var(--s);
margin:0;
opacity:0;
cursor:pointer;
}
The variable --s will define the size of our inputs that we make invisible using opacity:0. Everything is within a flexbox container (an inline one to easily integrate the star rating like an image or a simple text).
The real trick relies on i
.stars i {
position:absolute;
inset:0 0 calc(var(--s)*0.1);
pointer-events:none;
/* the star */
--v1:transparent,#000 0.5deg 108deg,#0000 109deg;
--v2:transparent,#000 0.5deg 36deg,#0000 37deg;
-webkit-mask:
conic-gradient(from 54deg at calc(var(--s)*0.68) calc(var(--s)*0.57),var(--v1)),
conic-gradient(from 90deg at calc(var(--s)*0.02) calc(var(--s)*0.35),var(--v2)),
conic-gradient(from 126deg at calc(var(--s)*0.5) calc(var(--s)*0.7) ,var(--v1)),
conic-gradient(from 162deg at calc(var(--s)*0.5) 0 ,var(--v2));
-webkit-mask-size: var(--s) var(--s);
-webkit-mask-composite: xor,destination-over;
mask-composite: exclude,add;
/**/
background:
linear-gradient(rgba(255,0,0,var(--o,0.3)) 0 0),
linear-gradient(gold 0 0)
#ccc;
background-size:
calc(var(--l,0)*var(--s)) 100%,
calc(var(--p,0)*var(--s)) 100%;
background-repeat:no-repeat;
}
First, we make it an absolute element that will cover all the div and logically all the inputs. We use pointer-events:none; to be able to interact with the inputs but still have the mouse cursor on the <i>.
Second, we apply 3 background layers as follows:
- The bottom layer is a grey coloration (
#ccc) to indicate the number of stars and the non-selected ones - The middle layer is the gold coloration. Here we use a gradient having a variable size based on the selected stars (controlled with the variable
--p) - The top layer is similar to (2) and will respond to the
:hovereffect (controlled with the variable--l). I will be using a semi-transparent color so we can still see the selected stars.
What about all those strange gradients and mask??
This is my personal touch and the crazy part of the work. I have built the star shape using multiple gradients applied to the mask property so all the background layers are seen through that shape.
Finally, the interactive part done using the following code:
.stars:focus-within {
outline:1px solid;
}
input:active ~ i{--o:1}
input:nth-of-type(N):checked ~ i {--p:N}
input:nth-of-type(N):hover ~ i {--l:N}
:focus-within will allow me to style the whole div when interacting with the inputs (good for accessibility)
When an input is active (clicked on) I change the semi-transparent color to an opaque one to highlight the click action.
On :checked I update the variable --p based on the input index. We can easily generate the code using SASS/LESS or by doing some copy/paste (it only takes a few seconds to write the code that can cover up to 20 inputs)
On :hover we do the same logic but with the variable --l.
What about the rtl support?
Either we update the background-position based on the direction attribute and we simply add:
[dir="rtl"] .stars i {
background-position: right;
}
Or I update the code and instead of multiple backgrounds, I rely on pseudo-elements that I can easily place using margin-inline-end
The trick is to have both pseudo-elements above each other (thanks to grid-area:1/1) with the adequate color. Their width will be controlled with the same variables used to control the gradient. Finally by using margin-inline-end:auto; they will get placed either at the left or the right based on the direction.
That's it
A simple non-hacky code and we have a fully interactive "Star rating" that you can easily embed anywhere.
Bonus
If you don't need the interactive part, here is a one-div version that you can control using CSS variables:
Top comments (43)
While the gradient-stuff is super-cool, the star could also be done with a simple polygon:
Then the
backgroundcan be anything you want.but you cannot repeat a clip-path ;) that's why I am using it as mask. It's one star repeated.
Ah, yes. I thought you had an
<i>after each<input>. What aboutrtl-support? 😁The lazy solution would be to use
Or I can update the code like this: codepen.io/t_afif/pen/eYWJNBd
updated the post to include this. I was writing this fast yesterday and forgot to work on it.
Cool!
Dude, you're no doubt a wizard
Hat off, high five and sincere great respect for your priceless contribution to the world's selection of perfect non-trivial simple high quality solutions
@inhuofficial think twice before saying my code is not accessible !
Oh dear, I feel strange....urggh no, no not again.
{Angry Rants man] - time for another fucking rant you fuckers, they were meant to be gone but fuck it you have done too much damage. @afif , @madsstoumann prepare for war!
I’m a pacifist 🌱
Yeah - are you a pacifist like Gandhi in Side Meir's Civilization? Be nice to you and suddenly you just drop a Nuke due to a bug in your code?
😂
A war we are gonna win!
you opened the pandora's box ...
First let me say that I am new to this site and love what I see so far. I believe I will learn a lot from you and thanks for all your hard work!
I added this great script to my html page once and it worked fine until I tried to add it more than once on the same page then the default checked rating that I set for each recipe disappears.
It goes back to the regular color of gray for all of them. When I hover and click the color changes but when I refresh it returns to gray.
I have a page with 21 different recipes on it and I want a different default rating for each one.
What am I missing?
PS: I am somewhere between newbie and intermediate in my coding skills.
did you make sure you used a different 'name' for each rating? You should not copy/paste the code and keep the same name. Check my codepen and you will notice that each group has a different name
Thank you that was the problem. I also had to move the word checked to the appropriate value instead of the default 3 value.
Thanks again for your support!
I am now trying to add a number to the right of the stars to indicate total number of voters.
I have tried using a span element after the star div but it doesn't line up properly with the star ratings.
From what I gather I cannot use margin or padding with a span element which is what I tried (span.ratingTotal{padding:0 0 5px 10px;}).
I also tried just placing the text inside the star div before the i tags and after them but that didn't work either.
The only thing I tried that seems to work is to use a p class tag and place it under the star ratings but I prefer to have it inline with them.
Is there a way to do this?
try like this: jsfiddle.net/ktpn8oq7/
Wow, thanks very much.
I had tried something similar but didn't make the same css changes as you.
I am trying to understand your css better as it is a little more advanced than I am used to.
I had decided to go with the p class but will now undo everything and try your solution.
Thanks again!
Dude, please, write a comprehensive guide on, "How to be great at CSS? (like Temani Afif)."
haha! that guide will contain one word "practise and parctise and practise" ;) There is no magic in become better.
Also read what Temani Afif is writing 😇
I've been a JavaScript instructor and still teach and mentor juniors/interns. It's funny how these advices are actually simple and disappointing as in, there never are any "magic bullets". Thanks!
However, do you recommend any resources? I got a membership in FrontendMentors, I'll be creating the websites they've listed there. I also know of Dribbble but I'd go for it after I'm done with FrontendMentors.
personally I am not a huge fan of never-ending online courses with their months of tutorial. The best way for me to learn is one trick a day. If each day you spend 10 min reading one or two articles about a new trick, it's fairly enough. Then, you can spend 1h trying that trick on your own to create something with it. That's it!
Building complex website to learn will waste you a lot of time and you will have to deal with a lot of things at the same time and it's hard to keep everything in mind. You may learn some methodologies but the road to become better will be very long and you will get tired rapidly.
find some good folks on twitter that you follow. read articles on DEV here, take a look at css-tricks.com/ and smashingmagazine.com/category/css/. try some of my challenges here: css-challenges.com/, etc
If you manage to learn something new each day and practice at least 1h a day, you will become better.
This is gold :) Thanks a lot Temani!
These were some really great and easy to follow instructions. I easily followed through it and saw the results. Thank you so much for these. I will be keeping these in mind and use them whenever a coding situation calls for it. It looks good.
It's never ending 😅
Don't judge me on this post. It was a fast one written a very hot Sunday. I cannot stay without competing with the actual "Star rating" posts 😛
What did you mean when you said?:
You know that kind of CSS code where users add the inputs and then try to hide them out of the screen using
position:absolute;and small sizes, etc.Also all the manual CSS code written to cover all the cases where we are obliged to set very specific values to get the intended result which make the code not scalable and each time you need to update something you have to redo a lot of code.
This is what I call hacky and there is nothing of this in my code. My code scale easily, there is no hard-coded value, I am not trying to make the input out of sight, you don't need to touch the CSS code if you want to add more stars or to change the size, etc
Ah, so no dirty filth, basically.
Ok, that makes sense.
Some comments may only be visible to logged-in visitors. Sign in to view all comments.