五星评价

利用radio同一个name点击其中一个选中别的都不被选中的单选的属性来代替js, 采用纯css控制( input[checked=”check”]~input{…} )

 1     input{
 2             display: inline-block;
 3             width: 20px;
 4             height: 20px;
 5             background-color: yellow;
 6             -webkit-appearance: none;
 7             -moz-appearance: none;
 8             appearance: none;
 9         }
10         input:checked~input{
11             background-color: lightblue;
12         }
13

1 <div id="radioBox">
2     <input type="radio" name="star">
3     <input type="radio" name="star">
4     <input type="radio" name="star">
5     <input type="radio" name="star">
6     <input type="radio" name="star">
7 </div>