Star Rating Using HTML CSS

By Super Admin | Aug 20, 2021 | Laravel
Share : Whatsapp

https://www.fundaofwebit.com/post/star-rating-in-html-css

HTML :

<div class="rating-css">
    <div class="star-icon">
        <input type="radio" value="1" name="product_rating" checked id="rating1">
        <label for="rating1" class="fa fa-star"></label>
        <input type="radio" value="2" name="product_rating" id="rating2">
        <label for="rating2" class="fa fa-star"></label>
        <input type="radio" value="3" name="product_rating" id="rating3">
        <label for="rating3" class="fa fa-star"></label>
        <input type="radio" value="4" name="product_rating" id="rating4">
        <label for="rating4" class="fa fa-star"></label>
        <input type="radio" value="5" name="product_rating" id="rating5">
        <label for="rating5" class="fa fa-star"></label>
    </div>
</div>


CSS:

/* rating */
.rating-css div {
    color#ffe400;
    font-size30px;
    font-familysans-serif;
    font-weight800;
    text-aligncenter;
    text-transformuppercase;
    padding20px 0;
  }
  .rating-css input {
    displaynone;
  }
  .rating-css input + label {
    font-size60px;
    text-shadow1px 1px 0 #8f8420;
    cursorpointer;
  }
  .rating-css input:checked + label ~ label {
    color#b4afaf;
  }
  .rating-css label:active {
    transformscale(0.8);
    transition0.3s ease;
  }

/* End of Star Rating */


Thank you.