zoukankan      html  css  js  c++  java
  • 纯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>

    效果图:

  • 相关阅读:
    家庭记账本APP开发准备(二)
    使用花生壳5做内网穿透
    课堂练习之可视化的强化版
    第五周总结
    课堂练习之疫情可视化
    第四周总结
    第三周总结
    第二周总结
    课堂练习之最大子数组
    软工第二学期开课博客
  • 原文地址:https://www.cnblogs.com/hesj/p/10536792.html
Copyright © 2011-2022 走看看