仿复选框样式

最新推荐文章于 2022-05-24 19:36:57 发布

张张张96

最新推荐文章于 2022-05-24 19:36:57 发布

阅读量504

点赞数

分类专栏： Css 文章标签： css checkbox 改变复选框样式

本文链接：https://blog.csdn.net/girl_0919/article/details/77980501

版权

Css 专栏收录该内容

6 篇文章 0 订阅

订阅专栏

相信大家在看到很多炫酷的网页时总会看到样式很棒的复选框，于是脑补下代码“input[‘type=”checkbox”’]:padding:10px;border:1px solid red; background:black;…”,完后，一检查人家的代码，立刻懵逼。

废话不多说，我来了，拯救你的无知。

原理：利用 label 这一特性自动聚焦到复选框

css样式


<style>
    input{              
                margin-bottom: 20px;
                padding: 10px;
                background-color: transparent;
                border: none;
                font-size: 15px;
                border-bottom: 1px solid rgba(238, 238, 238, 0.41);
                outline: none;  /* 清除 点击input 的边框*/
                color: #FFF;
            }
    input[type="checkbox" ] { display: none;}
    label{  
                        position: relative;
                        padding-left: 30px;
                        border: #F0F8FF;
                        display: inline-block;
                        font-size: 13px;
                        /*background: red;*/
                        color: #fff;
                        }    
     input[type="checkbox"] + label span{
                    width: 17px;
                    height: 17px;
                    display: inline-block;
                    border: 1px solid #fff;
                    position: absolute;
                    top: -3px;
                    left: 0;
                }
     input[type="checkbox"]:checked + label span::before{
                    content: "";
                    background: url(img/tick.png) no-repeat;
                    position: absolute;
                    left: 3px;
                    top: 3px;
                    font-size: 10px;
                    width: 10px;
                    height: 10px;
                }
</style>

html 样式

    <body>
        <div class="container"> 
            <form action="">
                <input type="" name="" id="" placeholder="用户名" /><br><br>
                <p>
                    <input type="checkbox" id="res"/>
                    <label for="res"><span></span>记住我</label>
                </p>
            </form>         
        </div>      
    </body>