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
<divclass="cont"><!-- Here we put five stars --><spanclass="star">★</span><spanclass="star">★</span><spanclass="star">★</span><spanclass="star">★</span><spanclass="star">★</span></div><style>.star{//Setthedefaultstyleforthestarcolor:lightgray;font-size:24px;}.star:hover~.star{//Whenthemousemovesoverastar,allthestarsbehinditwillbeselectedandsettogoldcolor: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:
<divclass="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 --><inputclass="radio"name="star"id="star1"type="radio"><inputclass="radio"name="star"id="star2"type="radio"><inputclass="radio"name="star"id="star3"type="radio"><inputclass="radio"name="star"id="star4"type="radio"><inputclass="radio"name="star"id="star5"type="radio"><!-- Create five more stars and use for binding with the five inputs above --><labelclass="label"for="star1">★</label><labelclass="label"for="star2">★</label><labelclass="label"for="star3">★</label><labelclass="label"for="star4">★</label><labelclass="label"for="star5">★</label></div><style>.cont{//Useflexiblelayouttoarrangethestarshorizontallyposition:relative;display:flex;}.radio{//Toolinputisstillhiddendisplay:none;}.label{//Setthedefaultstyleforthestarscolor:#ccc;transition-duration:.3s;font-size:24px;scale:.9;}#star1:checked~.label:nth-child(6),#star2:checked~.label:nth-child(-n+7){//When#star1isselectedbytheuser,findallthe.labelsbehindit//Usethechildselectortoselectthe6thelement(thefirstfiveareinput)andsetitscolorcolor:#515A5A;transition-duration:.3s;scale:1;}#star3:checked~.label:nth-child(-n+8),#star4:checked~.label:nth-child(-n+9){//Followthesamemethod,setthethirdandfourthstarstobluecolor:#3498db;transition-duration:.3s;scale:1;}#star5:checked~.label{//Thelaststardoesnotneedachildselector,justselectallthestarsandsetthemtogoldcolor:#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?