Featured image of post Pure CSS Rating Component

Pure CSS Rating Component

Flexible use of sibling selectors with <input type="radio"> Pure CSS Rating Component

See the effect first

The following is a rating component implemented purely by CSS. Click on the star to rate. Different ratings will display different colors.

This component is an upgraded version of the article Realize option selection effect without using js. Some prerequisite knowledge is mentioned in it. Students who are interested can read this article first.

Subsequent sibling selector ~

In the article Realize option selection effect without using js, we used the adjacent sibling selector +, which can select the next element of the target element. But in the above case, we hope that when clicking on the star, all the stars will become selected. At this time, we need to use the subsequent sibling selector ~, which can select all the sibling elements after the target element.

Let’s look at this simple example:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
<div class="cont">
<!-- Here we put five stars -->
<span class="star"></span>
<span class="star"></span>
<span class="star"></span>
<span class="star"></span>
<span class="star"></span>
</div>
<style>
.star{//Set the default style for the star
color: lightgray;
font-size: 24px;
}
.star:hover ~ .star{//When the mouse moves over a star, all the stars behind it will be selected and set to gold
color: gold;
font-size: 24px;
}
</style>

Let’s get started

Combining the previous case, we add <input class="radio">, and then replace <span>★</span> with <label>★</label>, it seems that victory is just around the corner.

The complete code of the rating component example is as follows:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
<div class="cont">
    <!-- We first create five inputs, which must be placed in front of the stars to facilitate the use of subsequent sibling selectors to select stars -->
    <input class="radio" name="star" id="star1" type="radio">
    <input class="radio" name="star" id="star2" type="radio">
    <input class="radio" name="star" id="star3" type="radio">
    <input class="radio" name="star" id="star4" type="radio">
    <input class="radio" name="star" id="star5" type="radio">
    <!-- Create five more stars and use for binding with the five inputs above -->
    <label class="label" for="star1"></label>
    <label class="label" for="star2"></label>
    <label class="label" for="star3"></label>
    <label class="label" for="star4"></label>
    <label class="label" for="star5"></label>
</div>
<style>
.cont{//Use flexible layout to arrange the stars horizontally
    position: relative;
    display: flex;
}
.radio{//Tool input is still hidden
    display: none;
}
.label{//Set the default style for the stars
    color: #ccc;
    transition-duration:.3s;
    font-size: 24px;
    scale:.9;
}
#star1:checked ~ .label:nth-child(6),
#star2:checked ~ .label:nth-child(-n+7)
{//When #star1 is selected by the user, find all the .labels behind it
    //Use the child selector to select the 6th element (the first five are input) and set its color
    color:#515A5A;
    transition-duration:.3s;
    scale: 1;
}
#star3:checked ~ .label:nth-child(-n+8),
#star4:checked ~ .label:nth-child(-n+9)
{//Follow the same method, set the third and fourth stars to blue
    color:#3498db;
    transition-duration:.3s;
    scale: 1;
}
#star5:checked ~ .label
{//The last star does not need a child selector, just select all the stars and set them to gold
    color:#f1c40f;
    transition-duration:.3s;
    scale: 1;
}
</style>

So we have completed this rating component that does not require js, and can even submit ratings normally without using js. Isn’t it simple?

Licensed under CC BY-NC-SA 4.0
Last updated on Sep 25, 2024 00:00 UTC
Built with Hugo
Theme Stack designed by Jimmy