五星评价
利用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>