CSS3 笔记 input勾选设置

 

 

<!DOCTYPE html>
<html>

    <head>
        <meta charset="UTF-8">
        <title></title>
        <style>
            .chekc input{
                display: none;   /*隐藏input checkbox*/
            }
            .chekc input:checked+label{ /*当checkbox 被选中时,兄弟元素lable的背景图片*/
                background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAABzenr0AAAEmElEQVRYR8VXS4wUVRQ9p7veA8JXEwWGqWKGONPVxhhJhMGYqIEgEgwDGgMkgsatCupONsJONyosdGGMQogh4GdACUgUdCUIC2OMXd1D+FT18NEERz4BXnXXNVVMQ09Pz0wPA/KWVe+ec+599757H3GXF+8yPxoWcKIFY6+WrScILhaig+BUQGaIoEzyHCCnEeGoUPZaQemnNuBaI84NKyBoxrjLsF5HiusBTm4EVCD/EPLe+Ki02S7iylA2QwrI22pORO4iMD0GSYAFXZToS0Tl42GIoiUgNJrESrdRUstBPF8RKsCZlEhnJgiPDCZiUAGeo18QyDaCGoKAkHfbg/ATAuFQHnUDY8q2egXgehDNAjEEX3R9s7OeXV0BOdt6mkx9nxgIdo1Jm5WtJ3G1kfBX9iQ5E+mdBJ5NvkXRYrdY2leLMUDA8emYaZT6DeAUiHzkBuGrIyGu3isAPVttJvkaIL1iwtnZszhZvWeAgJytDpHsEOA71zdLGcdgFCsWkbd1F4ilInIoG4SPDSogZ+tVJL6A4PQUY9qnncPlUXDfMD07FeN7tc6DmEHBqkxgtld+9otAztanSDiIsNotmm23g7yCkXfUagG3xgntBsYZIMCz1aMgjwhwKuubltGQC5D2HPUxhUvSkelo60ExxvMcfQJAC0TmuEF4NP52IwI5R28g8A4i2eQWwzduVUBCbuudJJbHzoy9YB5p7UVvIqBZfYgU1xHYkPHNxn4CPEf9CHC+SPRMNihdL8ERLgEsz9Y7YnIIenTJPD7rDE5VYHK2tYhM7QPkoOuH8/tHwNYFEm1SNplsDwoj5I5LxfIc3UVgST3yGC83A+1M67wIurOBaa8RoEKSVvqSmdx2HhdGIqAR8hiv+15MKk/Q/wokzPqhrj2CCwAnlq6YiQ/9jUu1F8oxRz/4gG/+rL0XBFCeo78ZyvMK1h/3YYI1Tl8E5KLrh5NqBGgPQKbeEeRs9TLJzwTY4/pmGYFSbJyQ22oPyYWDhb3akcoRAMi7vnFrI/ADwAUi0aJsUNpfbViYjmzZUkdIju8TsfwYkCrZ6ttGyWO8gmMtjJDaD8gB1w8X1C1DEfkgG4Rv1eZAd5OaXbZw4HqPwF5AxoF8qhHPb1aBep/kmwJszPpmQz8B+WY1V1I8DOCk65vWekmYb4IrlvoZ4P3J/zqlNlTyeo4+DqCVkXRkiuGv/QQkncvRJwjMJOSljB9urQdWcDArEvV5wh+Ga2q722AC8o5aI+CW+HKKHawkc79ekLf1CiG236FmVADRBGCF65sdFaH12vEvJOdBsDsTJBk/6nbsOXp3PJiIyOFsEM6rjtJAAdPQQq1+j+8EQDa7frhuJJdS7V7PUZsAro1rX0z48LADSQzg2elOMN3Vl2i3PJJdK+vtIDqv45SXuUF5V63AQYfSvK1XRpQt1UNpKgg/HW7evy1DaUVloVl1ROTXfckDETlPJGP5V/FYLgY9yd6bY/kyIZ4jeE/fTXnrY3lFRPIwSVlrAb79vz9Mqs+r72n2JIWLJYW5NU+zvwDpuSNPs9FUQCO2w74NGwEZzZ7/AI4UOT89TOLfAAAAAElFTkSuQmCC);
            }
            .chekc input + label{/*当checkbox 没有被选中时,兄弟元素lable的背景图片*/
                background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAABzenr0AAAEMUlEQVRYR8WXW2icRRTHz/9sEoyIpipW2ygSacjOzAo2LVpFfVOpWrSitBEkIt5FUFpveKliVVpUVFCLhbSC9QLWC9gHfbFaLUjsQ785325qvFANFSwVWh+aZL/vyIRs3Gx2czG7dJ6W/eac85szZ/5zBnSCB05wfJozgDHmFCK6mIjOIaKFzMxE9GeapkMjIyP9g4ODR+eyqNkCZIwxdzDzzUR0JRE11whSVNVvAXzkvd9KRMWZYGYEcM5dp6ovA+gsc7ZPVQ+o6u/MfKaqhoxkAUz4U9WfAaz33n8yHcS0AM65DUT0THCgqkcAvD46OvruwMDAr5VOOzo6Tmttbb0EwEoiup+IMuN2L4nI47UgagJYa7cDuK3kRFU3xnH8z0wpDd+7urpyTU1N24ho6bj9ByLSE9ZRaV8VwFr7LICniWiUiNZ473fOJnD5nO7u7ubh4eEXiGjdOMQmEXl0RoBsNrsyk8l8QURJkiSr8vn8rrkGL5/vnHuCiDaO/7e6siYqM8DW2gMALkjT9J44jrfMJ3jJ1lr7MYDVoTBFJBRzWvo2CcBauwbA+0Tkvfe5egQPPpxzC1X1NwAnqWqviGyvBbAHwGVJktyYz+c/rRdA8GOM2cTM64mo33u/fAqAMeZ0AIcBHE/TtC2O45F6AoyfjP3BZ5Iki/L5/KHwe2ILjDG9zNynqp+JyA31DF5WC0MAFhHRvd77tycBlEQnTdPNcRw/0iCAUjFOiNNEBqy1WwDcpaoPi8irjQBwzr1GRA+q6nYR6Z2UAWvtewCCWt3nvX+rEQDW2hcBPKaqO0XkpkqAVwA8pKrPi8hTDQIYk3dVfVNEwn3xXxE654JkblbVHSJya4MAvgFwORE96b0fU8eJGshms1dkMpndqnpYRM6qdnHMB6q9vb21ra3t2PgteZX3/qtJAAHGWvsXgDOKxeKlhUJh73wCVtoaY25h5g9V9ZiILAhyUAlA1to3ADzQCC1wzgURyqnqVhG5s6oUG2POY+ZfQprqmQVr7VoAO1Q1ZeYlURSFGGNjSj/gnAsKdbeqHlTVi+I4PjKfrbDWLgfwNRGdrKrbROT2cn9TAHK53II0TfcBOF9V9zDzqiiK/v4/EF1dXSuamppCP9EWbkNmXlrpq2pHlM1mlzBzP4BTVfUQM6+Nomj3XCCMMT0A+gC0qOrRNE2X5fP5nyp91OwJnXMXEtGXofdX1dDLvVMsFtcNDAyEo1RrsDHmamZ+joiWhUnhWCdJck2hUPixmtG0XXFnZ+filpaWz8uay+MAflDV70NKQ1sOoBnA4nDlAwjvhqAhpbE/TdPr4zg+WIt4xncBEYVV9TBzaDDPneU2/EFEG7z3feXt15wzUGEQXkcrAFxLREFOzw7bA2DsaaaqQ0S0l5l3RVH03WxeRVWP4SxXWLdps9mCugWr5uhfVdXTMMM9zzAAAAAASUVORK5CYII=) left center no-repeat;/* 背景图片位置设置和背景图片平铺设置 */
                background-size: 20px 20px; /*设置背景图片的大小*/
                padding-left: 20px;/*留出20像素的位置放背景图片,是的文本不会遮挡背景图片*/
            }
            .chekc label{                
                cursor: hand;
            }
        </style>
    </head>

    <body>
        <div class="chekc">
            <input type="checkbox" id="chk" /><!-- id 和 lable 的属性 for的值必须保持一致,否则没有特效 -->
            <label for="chk">点击自动勾选</label>
        </div>
    </body>

</html>

 

效果图

 

posted @ 2019-04-26 09:27  蓝雨冰城  阅读(444)  评论(0编辑  收藏  举报