仿复选框样式-蒲公英云

仿复选框样式

梦里梦外; 2022-06-08 04:20 365阅读 0赞

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