Pure hand-picked collections of HTML and CSS Star Ratings. Updated with 8 items on December 23, 2020.
Dependency: jQuery(v2.1.3)
About the Code
Vue.js Star Rating
A simple Vue.js star rating component
More info: Link
Dependency: JS – Vue.js(v2.3.4), CSS – bulma(0.4.2)
About the Code
CSS Star Ratings: Part Deux
Did one of these a while back that used checkboxes and javascript. This one hooks into a radio button group and uses precisely ZERO js to drive the input UI.
It also uses a fun little trick with flex-direction row-reverse to drive the hover state.
The javascript is used to calculate an average of the two visible inputs and then style the average rating below. Pretty slick!
More info: Link
Dependency: CSS – font-awesome(v5.11.2), JS – jQuery(v3.4.1)
About the Code
Alien Rating Control
Wanted to take a stab at making an animated “css star rating” that is also accessible. It needs some more testing and tweaking with assistive technologies, but it’s in a good spot. The control is keyboard, mouse, and touch friendly, and also responds to the “prefers-reduced-motion” media query.
The avatar is SVG, created in Adobe Illustrator.
More info: Link
Dependency: gsap(3.0.5), MorphSVGPlugin3.min.js
About the Code
Range slider with dynamic icons
More info: Link
Dependency: CSS – font-awesome(v5.11.2); JS – less(v3.10.3) jQuery(v3.4.1) jquery-ui(1.12.1)
About the Code
Rating Stars Widget with React
A little demonstration of a working star rating widget (re)created in ReactJS. Plug it in with your back-end logic and you are good to go. Customize the look with CSS and do amazing stuffs.
Use the component in your project freely, also when you do and it is up for public to see.
NOTE: The widget is not accessible, if you plan on using the code in a real-world product please make sure you add accessibility as necessary.
More info: Link
Dependency: CSS – fontawesome(v5.0.6), JS – react-with-addons(v0.14.7), react-dom(0.14.7), lodash(v4.17.5)
About the Code
Movie Card Interactive UI With Pure CSS3 Animation Rating
Using CSS3 only to animate and keep track of the rating
More info: Link
Dependency: jQuery(2.1.3), jquery-ui(1.11.2)
About the Code
SVG Star Rating
Star rating with SVG and mostly CSS. VERY light JS.
More info: Link
Dependency: jQuery(v2.1.3)
About the Code
Ratings Inspiration
A couple of thoughts about rating interactions & animations
More info: Link
Dependency: CSS – RKQrdr.scss, JS – snap.svg(0.4.1)
About the Code
Super simple star rating
Super simple star rating with a tiny bit of jquery.
More info: Link
Dependency: CSS – font-awesome(v4.7.0), JS – jQuery(3.1.1)
About the Code
Clean Star Rating
Clean Star Rating with less js
More info: Link
Dependency: jQuery(v2.1.3)
About the Code
Full css3 only colorful css star ratings \w inputs
More info: Link
Dependency: jQuery(v2.1.3)
About the Code
Pure CSS Star Rating
Star ratings made with pure CSS. Stars will highlight on hover and you can also click on the star rating and display that rating. Made form input fields so the form can be processed.
More info: Link
Dependency: –
About the Code
Apple AppStore styled star rating in pure HTML/CSS
I saw the appstore star rating system and asked myself if it is easy to build it in pure html and css. That’s my try. It works in IE9+, Safari, FF and Chrome. (reflection works webkit-only)
More info: Link
Dependency: –
About the Code
Standalone SVG CSS-only star rating component
This is a CSS-only component that dynamically generates each of the SVG icons to be used as background images for each of the stars. For the rating value to be displayed, the “data-rating-value” HTML attribute must be updated and calculated rounding every 0.25 to reflect the proper rating.
More info: Link
Dependency: –
About the Code
Percentage Based Star Rating With Font Awesome
I was working on a personal recipes website and wanted to add a simple percentage based star rating using Font Awesome icons. It needed to work in a way that I could add the rating percentage for each recipe to the html and make it reflect in the stars.
There probably must be similar or even better ways to do it out there, but I searched through the web and could only find css star ratings that the user would be clicking in the stars to give their own rating, or the rating didn’t use font awesome. So I created this piece of code myself and thought of sharing with whoever needs it.
More info: Link
Dependency: fontawesome
About the Code
Star Rating | Pure CSS
Awesome Star Rating using Pure CSS!
Just hover over the star and give it a rate. Just like that!
To change your rate all you have to do is to click again on the star you clicked before to give the rate it’ll clear the rate ( return all-stars not selected ) so you can rate again 😉
More info: Link
Dependency: font-awesome(4.7.0)
About the Code
Star rating for email
A star rating system that works in email clients (including Gmail!) Hovering over the stars fills in the correct amount. Each star is an anchor tag which can then be linked to different rating URLs (ex: http://www.example.com?rating=5).
This rating system depends on the General Sibling selector (~) which has some unsupported performance. Be sure that your mail client is not stripping out the general sibling selector on send (I have noticed this when using MailChimp to send, however, Pardot does not seem to strip the selector). Currently does not work on the Google Inbox web app 🙁
More info: Link
Dependency: –
About the Code
CSS-only Star Rating
The goal was to create a radio button-powered star rating widget that uses CSS only. I wanted each star preceding the selected one to appear selected as well.
More info: Link
Dependency: CSS – font-awesome(v4.3.0), JS – jQuery(v2.1.3)
About the Code
CSS & Radio Button Star Rating
Simplified version of Lea Verou’s accessible star rating widget using Font Awesome to display empty stars.
More info: Link
Dependency: CSS – font-awesome(v4.1.0), Google fonts: Raleway JS – jQuery(v2.1.3)
About the Code
Percentage based css star ratings
Getting a star rating using a %
More info: Link
Dependency: jQuery(v2.1.3)
About the Code
A Simple JavaScript Method For Filling CSS Star Ratings
More info: Link
Dependency: font-awesome(v4.7.0)
Leave a Reply