仿复选框样式

相信大家在看到很多炫酷的网页时总会看到样式很棒的复选框,于是 脑补下代码“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>

效果图如下:
样式效果

点击后的效果图

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值