仿复选框样式

来源：互联网发布：网络格言编辑：程序博客网时间：2024/05/18 10:28

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

效果图如下：
样式效果

点击后的效果图

阅读全文

0 0

仿复选框样式

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

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

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