Pure CSS Star Rating Widget - How To Create a Simple Star Rating with Html and CSS - No Javascipt

💓💓💓💕💕💓💓💓💓💕💓💕💓💓💓💓💓💓💓💓 thank you for sharing your thoughts

Fantastic!

good job! thank

Wow man that was too cool 5 year ago :)

This fixed my issue. Thank you so much.

Everything is so nearly working for me; hover fades up stars (great!) but clicking them does not activate them?? ...it's not activating the actual radio button, if I click the small radio button itself it works (when not hidden) but the star itself is not doing it - any ideas or advise on what I may have done wrong would be really appreciated!??

Twinkle twinkle little star.

thanks alot

Best music and best teacher ever !

Sene halaldi var ustunde makar tipli tabanca

harami evabe form submit kore?????

Can you do it without the pure css

ayuda ya no carga el icono con el link de bootstrapcdn

woooooo poop smoke wooo

last star is not checking.

thank you you're a genius

very very awesome pro thanks from egypt <3

By the way, if you want to center a block inside another one widthout "flex", you can add "display: grid; place-items:center" to the parent element, and don't forget to add width and height to the child element, everything will be aligned

Everything works normally, but I can't uncheck the star. Any idea why that could be?

EDIT:Found the problem. The name of radio button has to be the same as label's "for" attribute so that they can recognize groups of radio buttons. I had a problem because I was dynamically generating radio buttons and everyone had a different name.

fucking awful tune in the background

There is a little tutorial in your ads video...

Thanks its helped me a lot

I know it is an old video but if you use add .rating input:hover ~ label:after{opacity:1} it will show all the stars that will be checked when you hover over any of the stars.

How can I submit for example 3 stars, thank you in advance

thank you

Awesome! Thx for guide !

got it ❤

ionic can not working css

First star alone won't check. I reviewed the video and compared it to my html for any errors. From what I can tell there weren't any and the other stars, in which the html was copied from the first, do not seem to have any problem. Is anyone able to offer advice? I would really appreciate it.

Thank You so Muuch ^^

thanks, you are awesome

Source code please

when i put
.testimonial-rate label:before{
content: '/f005';
font-family: fontAwesome;
}
it doesn't work shows only /f005, but if i use
<i class="fas fa-star"></i> it show star
so FontAvesome work, then no i have no ideia why

Code?

Do you can't send me this source :D

you are brilliant , sir

good job bro....

nice video sir but i have a question
i want to save rating score in database when anyone rate it on my website how can i implement it in my code please tell me

You can make a video input[type=range] with a content slider attached to it

good job

can you send it to me your code? if its okay to you :(( I badly need that :"((((

actually sir i want to club all the rating to make a new graph so will you plz help me in doing so

How can I write star rating code by using only a single<a> tag, with as many <span> tags as I need.?

All help will be appreciated, thanks.

thank you so much! it really helped!)))

thank you soo much sir this helps me alot...

بارك الله فيك اخي محمد

And you are using flex so no need for rotating, just do flex-direction: row-reverse :)