$(".rating input:radio").attr("checked", false);
$('.rating input').click(function() {
$(".rating span").removeClass('checked');
$(this).parent().addClass('checked');
});
$('input:radio').change(function() {
var userRating = this.value;
alert(userRating);
});.rating {
float: left;
width: 300px;
}
.rating span {
float: right;
position: relative;
}
.rating span input {
position: absolute;
top: 0px;
left: 0px;
opacity: 0;
}
.rating span label {
display: inline-block;
width: 30px;
height: 30px;
text-align: center;
color: #FFF;
background: #ccc;
font-size: 30px;
margin-right: 2px;
line-height: 30px;
border-radius: 50%;
-webkit-border-radius: 50%;
}
.rating span:hover~span label,
.rating span:hover label,
.rating span.checked label,
.rating span.checked~span label {
background: #F90;
color: #FFF;
}<html>
<head>
<script src="https://cdn.jsdelivr.net/npm/jquery@3.5.1/dist/jquery.slim.min.js"></script>
</head>
<body>
<form method="post" action="star.php">
<div class="rating">
<span><input type="radio" name="ratingg" id="str5" value="5"><label for="str5"></label></span>
<span><input type="radio" name="ratingg" id="str4" value="4"><label for="str4"></label></span>
<span><input type="radio" name="ratingg" id="str3" value="3"><label for="str3"></label></span>
<span><input type="radio" name="ratingg" id="str2" value="2"><label for="str2"></label></span>
<span><input type="radio" name="ratingg" id="str1" value="1"><label for="str1"></label></span>
</div>
<label for="review">Your review about the place.</label>
<textarea name="review" id="review" col="5" row="30"></textarea>
<input type="hidden" name="product_id" id="product_id" value="<?=$row['id']?>">
<input type="submit" name="submit">
</form>
</body>
</html>everything is working fine.i Just need these radio buttons to be displayed as star .help me with css Please.
please use font awesome icon here is the link
search for the star icon you get the suitable icon as you want and put it into the label tag you have put in your code.
<label><i class="fa-solid fa-star"></i></label>
this is the JS file link please download the file from here which is used to show the icons.
https://drive.google.com/file/d/1eLhUjVd4ldCFmIgJLkUtFVfLUjEYZdW5/view?usp=sharing
and then make replace the following css code which you have done.
.rating span label {
display: inline-block;
width: 30px;
height: 30px;
text-align: center;
color: #ccc;
font-size: 30px;
margin-right: 2px;
line-height: 30px;
border-radius: 50%;
-webkit-border-radius: 50%;
}
.rating span:hover~span label,
.rating span:hover label,
.rating span.checked label,
.rating span.checked~span label {
color: #F90;
}