How we can create star rating design using HTML & CSS? Solution: CSS Star Rating With Dynamic Text Using jQuery, HTML CSS 5 Star Rate.
I am sure that, you have seen the star rating system on many e-commerce websites. I know they are dynamic, but their design created in HTML CSS & JavaScript or any JS library. First, designers created the rating UI and developer connect it to the database.
Today I will show you how we can create star rating design using only HTML & CSS. For creating this I used some CSS Unicode property, maybe you don’t know about that. This is an HTML radio input tag based design after some CSS modification radio button becomes a star.
So, Today I am sharing CSS Star Rating with a dynamic text using jQuery. I used jQuery only to create a text below the rating for giving info which rating user gives. You can remove that text and jQuery if you don’t want the text or don’t want to depend on JS. You can call this pure HTML CSS 5 Star Rating.
If you are thinking now how this design actually is, then see the preview given below.
Preview Of HTML CSS Rate
See this video preview to getting an idea of how this rating design looks like.
Now you can see this visually. If you like this, then get the source code of its.
You May Also Like:
CSS Star Rating Source Code
Before sharing source code, let’s talk about the program. As you know this is a radio tag based design. I used CSS unicode-bidi: bidi-override;
and direction: rtl;
properties. The unicode-bidi
 CSS property, together with the direction
property, determines how the bidirectional text in a document is handled (more info).
Using direction property I gave the direction on radio buttons left to right. & for creating star icons I used content:"\f006"
, this is the code for creating star using Unicode icons. Also, I used the font-awesome font family. Lets other functions works using :hover
& :before
properties. You will understand fully after seeing the codes.
For creating this you have to create 3 files. First for HTML, second for CSS, & third for JavaScript. You can skip jQuery or JS if you don’t want the text below the star rating. Follow the steps to creating this without any error.
index.html
Create an HTML file named ‘index.html‘ and put these codes given here below.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 |
<!doctype html> <!-- code by webdevtrick ( https://webdevtrick.com ) --> <html> <head> <meta charset="utf-8"> <title>CSS Star Rating | Webdevtrick.com</title> <link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"> <link href="style.css" rel="stylesheet"> </head> <body> <div class="main"> <form id="rating-form"> <span class="rating-star"> <input type="radio" name="rating" value="5"><span class="star"></span> <input type="radio" name="rating" value="4"><span class="star"></span> <input type="radio" name="rating" value="3"><span class="star"></span> <input type="radio" name="rating" value="2"><span class="star"></span> <input type="radio" name="rating" value="1"><span class="star"></span> </span> </form> <p>Thanks For Giving <span id="selected-rating" class="selected-rating" >0</span> Stars.</p> </div> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script> <script src="function.js" type="text/javascript"></script> </body> </html> |
style.css
Now create a CSS file named ‘style.css‘ and put these codes.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 |
/** code by webdevtrick ( https://webdevtrick.com ) **/ .main { margin-left: 40%; margin-top: 15%; } .rating-star { direction: rtl; font-size: 40px; unicode-bidi: bidi-override; display: inline-block; } .rating-star input { opacity: 0; position: relative; left: -30px; z-index: 2; cursor: pointer; } .rating-star span.star:before { color: #777777; } .rating-star span.star { display: inline-block; font-family: FontAwesome; font-style: normal; font-weight: normal; position: relative; z-index: 1; } .rating-star span { margin-left: -30px; } .rating-star span.star:before { color: #777777; content:"\f006"; } .rating-star input:hover + span.star:before, .rating-star input:hover + span.star ~ span.star:before, .rating-star input:checked + span.star:before, .rating-star input:checked + span.star ~ span.star:before { color: #ffd100; content:"\f005"; } .selected-rating{ color: #ffd100; font-weight: bold; font-size: 42px; } |
function.js
The final step, Create a JS file named ‘function.js‘ and put the codes.
1 2 3 4 |
/** code by webdevtrick ( https://webdevtrick.com ) **/ $('#rating-form').on('change','[name="rating"]',function(){ $('#selected-rating').text($('[name="rating"]:checked').val()); }); |
That’s It. Now you have successfully created CSS Star Rating with dynamic text using jQuery. In other words, Pure HTML CSS 5 Star Design. If you have any doubt or question comment down below.
Thanks For Visiting, Keep Visiting.
Thanks for this nice Information. Can you share how to create star rating on Google search.
Thanks for the comment, You are talking about rich snippet, If you are using WordPress then there are so many plugins for this. If you don’t use WordPress or want to know in depth then message me on facebook – Webdevtrick
So happy this is pure CSS bitch.
Pls share ye mail id
contact@webdevtrick.com