纯css实现评分

用到的知识点：

　　E:checked:单选或复选框被选中　

　　E ~ F: 选择后面的兄弟节点们:选择后面的兄弟节点

　　E::after,E::before: 伪元素选择器 在匹配E的元素后面(前面)插入内容

 

css代码：　　

.star-box{display:table;}
.star-box label{float:right;color:#999;}
.star-box label::after{content:'★';font-size:28px;padding:5px;display:inline-block;line-height:1;}
.star-box input:checked~label,
.star-box label:hover~label,
.star-box label:hover{color:red;}

 

html代码：

　　<div class="star-box">
        <input type="radio" name="star" id="star5" hidden/>
        <label for="star5"></label>

        <input type="radio" name="star" id="star4" hidden/>
        <label for="star4"></label>

        <input type="radio" name="star" id="star3" hidden/>
        <label for="star3"></label>

        <input type="radio" name="star" id="star2" hidden/>
        <label for="star2"></label>

        <input type="radio" name="star" id="star1" hidden/>
        <label for="star1"></label>
    </div>

 

效果图：

 

转载于:https://www.cnblogs.com/hesj/p/10536792.html