zoukankan      html  css  js  c++  java
  • 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>

    效果图

  • 相关阅读:
    DevExpress之Treelist应用
    空间参考及坐标转换
    ArcGIS API for JavaScript开发环境搭建及第一个实例demo
    SQL中字符串拼接
    Json.net实现方便的Json转C#(dynamic动态类型)对象
    第四章:C#如何生成JSON字符串提交给接口(服务器)
    第三章:C#如何生成JSON字符串?(序列化对象)
    第二章:C#如何解析JSON数据?(反序列化对象)
    Eucalyptus4.0 管理页面介绍
    Eucalyptus常用查询命令
  • 原文地址:https://www.cnblogs.com/lanyubaicl/p/10772427.html
Copyright © 2011-2022 走看看