Advertisement
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.
Now you can see this visually. If you like this, then get the source code of its..
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..
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..
<!doctype html>
<!-- code by Watu X Team ( https://Watu-X-Team.blogspot.com ) -->
<html>
<head>
<meta charset="utf-8">
<title>CSS Star Rating | Watuxteam.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>
/** code by Watu X Team ( https://Watu-X-Team.blogspot.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;
}
/** code by Watu X Team ( https://WatuXTeam.com ) **/
$('#rating-form').on('change','[name="rating"]',function(){ $('#selected-rating').text($('[name="rating"]:checked').val());});
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.
