Star Rating Using CSS

In the digital age, star ratings have become the quintessential symbols for expressing feedback and evaluations. They are used ubiquitously in various contexts, from rating movies and TV shows to reviewing restaurants and hotels. Star ratings offer a quick and universally understood way to communicate the quality and appeal of a product or service.

To implement star ratings on a website, we can leverage a combination of CSS and JavaScript. Here, we will guide you through the creation of a star rating system for your web content.

Creating the CSS for Star Ratings:

In the CSS portion of your code, you can define the appearance and behavior of the star rating system. The following code provides a clear and stylish representation of star ratings:

.rating {
    float: right;
    margin-top: -35px;
}

.rating:not(:checked) > input {
    position: absolute;
    top: -9999px;
    clip: rect(0, 0, 0, 0);
}

.rating:not(:checked) > label {
    float: right;
    width: 1em;
    padding: 0 .1em;
    overflow: hidden;
    white-space: nowrap;
    cursor: pointer;
    font-size: 120%;
    line-height: 1.2;
    color: #ddd;
    text-shadow: 1px 1px #bbb, 2px 2px #666, .1em .1em .2em rgba(0, 0, 0, 0.5);
}

.rating:not(:checked) > label:before {
    content: '★ ';
}

.rating > input:checked ~ label {
    color: #f70;
    text-shadow: 1px 1px #c60, 2px 2px #940, .1em .1em .2em rgba(0, 0, 0, 0.5);
}

.rating:not(:checked) > label:hover,
.rating:not(:checked) > label:hover ~ label {
    color: gold;
    text-shadow: 1px 1px goldenrod, 2px 2px #B57340, .1em .1em .2em rgba(0, 0, 0, 0.5);
}

.rating > input:checked + label:hover,
.rating > input:checked + label:hover ~ label,
.rating > input:checked ~ label:hover,
.rating > input:checked ~ label:hover ~ label,
.rating > label:hover ~ input:checked ~ label {
    color: #ea0;
    text-shadow: 1px 1px goldenrod, 2px 2px #B57340, .1em .1em .2em rgba(0, 0, 0, 0.5);
}

.rating > label:active {
    position: relative;
    top: 2px;
    left: 2px;
}

Defining the HTML Structure:

To bring the star rating system to life, you need to structure your HTML. Here’s an example of how you can create a star rating using radio buttons and labels:

<div class="rating" id="rating">
    <input type="radio" id="star5" name="rating" value="5" /><label for="star5" title="Rocks!">5 stars</label>
    <input type="radio" id="star4" name="rating" value="4" /><label for="star4" title="Pretty good">4 stars</label>
    <input type="radio" id="star3" name="rating" value="3" /><label for="star3" title="Meh">3 stars</label>
    <input type="radio" id="star2" name="rating" value="2" /><label for="star2" title="Kinda bad">2 stars</label>
    <input type="radio" id="star1" name="rating" value="1" /><label for="star1" title="Sucks big time">1 star</label>
</div>

JavaScript for Rating Value:

In JavaScript, you can extract the value of the selected star rating using the following code:

var rating = $('input:radio[name=rating]:checked').val();

By following these steps, you can implement a visually appealing and functional star rating system on your website. Users can easily provide feedback and ratings, while your website benefits from an interactive and user-friendly interface. Star ratings enhance user engagement and provide valuable insights into the popularity and quality of your content or products.