实现好看的复选框

最新推荐文章于 2022-09-07 23:50:29 发布

o-h-

最新推荐文章于 2022-09-07 23:50:29 发布

阅读量416

点赞数

分类专栏： css 文章标签： css css3 html

本文链接：https://blog.csdn.net/m0_66983971/article/details/125285857

版权

css 专栏收录该内容

20 篇文章 3 订阅

订阅专栏

实现好看的复选框

在这里插入图片描述

   <!-- label是为了改善用户体验（点击整个框框或者圈圈就可以实现跳转）
    注意:label里面不要添加任何属性,不然实现不了效果!!! -->
    <label>
            <input type="checkbox">
            <!-- 设置一个框 -->
            <div class="k"></div>
            <!-- 设置一个勾 -->
            <div class="g"></div>
        选我
    </label>

  label{
            position:relative;
        }
        input{
            width: 30px;
            height: 30px;
            background-color: forestgreen;
            /* 不需要自带的input框框,需要给它隐藏起来 */
            display:none;
        }
        .k{
            width: 20px;
            height: 20px;
            background-color: cornflowerblue;
            /* 变成圆圈 */
            border-radius:50%;
            /* 加浮动，让框（圈）和文字横着排在一起 */
            float:left;
        }
        .g{
            width: 10px;
            height: 5px;
            border-left:2px solid black;
            border-bottom:2px solid black;
            /* 旋转角度 */
            transform:rotate(316deg);
            /* 加绝对定位，让勾勾到圆圈里面去 */
            position:absolute;
            top:5px;
            left:-16px;
            /* 先隐藏起来 */
            display: none;
        }
        /* 当选中input的时候,给他的兄弟(!!!).g设置样式 */
        input:checked~.g{
            /* 点击的时候再显示出来 */
           display: block;
        }
        input:checked~.k{
            /* 当选中它的时候,变颜色(或者其他效果可以自己添加) */
            background: crimson;
        }