$(".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>todo funciona bien. Solo necesito que estos botones de radio se muestren como estrella. Ayúdame con css, por favor.
por favor use el icono de fuente impresionante aquí está el enlace
busque el icono de estrella, obtendrá el icono adecuado que desee y póngalo en la etiqueta que ha puesto en su código.
<label><i class="fa-solid fa-star"></i></label>este es el enlace del archivo JS, descargue el archivo desde aquí que se usa para mostrar los íconos.
https://drive.google.com/file/d/1eLhUjVd4ldCFmIgJLkUtFVfLUjEYZdW5/view?usp=sharing
y luego reemplace el siguiente código css que ha hecho.
.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; }