I want to convert radio buttons into star for star rating . i followed various tutorials but none wo-CodePudding

$(".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/[email protected]/dist/jquery.slim.min.js"></script>
</head>

<body>
  <form method="post" action="star.php">
    <div >
      <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.

CodePudding user response：

please use font awesome icon here is the link

https://fontawesome.com/icons

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 ></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;
}