Star Rating In HTML CSS

Star Rating In PHP

Star Rating In Laravel

Star Rating Using HTML CSS Laravel/PHP

Star rating show the performance, quality and other things in different field. From the star rating we are analyse performance. Here we will learn how to use star rating using HTML and CSS. There are a other way we can do this. We will learn that in other articles.

1. HTML

2. CSS

1. HTML Code

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

Note – In This HTML code you can change name, id and value as per your requirement.

2. CSS Code

/* rating */
.rating-css div {
    color: #ffe400;
    font-size: 30px;
    font-family: sans-serif;
    font-weight: 800;
    text-align: center;
    text-transform: uppercase;
    padding: 20px 0;
  }
  .rating-css input {
    display: none;
  }
  .rating-css input + label {
    font-size: 60px;
    text-shadow: 1px 1px 0 #8f8420;
    cursor: pointer;
  }
  .rating-css input:checked + label ~ label {
    color: #b4afaf;
  }
  .rating-css label:active {
    transform: scale(0.8);
    transition: 0.3s ease;
  }

/* End of Star Rating */

Thank you.