zoukankan      html  css  js  c++  java
  • 纯CSS+HTML自定义checkbox效果[转]

    <!DOCTYPE html>
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>DIVCSS5 CSS?τ???? ?П?}</title>
    <style>
    .wrap {
    500px;
    background-color: #EEE;
    border: 2px solid #DEF;
    }

    input[type='checkbox'] {
    display: none;
    }

    label {
    display: inline-block;
    60px;
    height: 60px;
    position: relative;
    margin: 20px 120px 0 20px;
    background: url(../blank.png);
    background-position: 0 0px;
    -webkit-transition: background 0.5s linear;
    }

    input[type='checkbox']:checked+label {
    background-position: 0 -60px;
    }

    label::after {
    content: attr(data-name);
    /* 利用attr可以减少css代码量*/
    display: inline-block;
    position: relative;
    120px;
    height: 60px;
    left: 100%;
    vertical-align: middle;
    margin: 10px;
    /* line-height: 60px; */
    }
    </style>
    </head>
    <body>
    <div class="divcss5">
    <div class="wrap">
    <input type="checkbox" id="checkbox01" />
    <label for="checkbox01" data-name="点点点点"></label>
    <input type="checkbox" id="checkbox02" />
    <label for="checkbox02" data-name="点点点点"></label>
    <input type="checkbox" id="checkbox03" />
    <label for="checkbox03" data-name="点点点点"></label>
    <input type="checkbox" id="checkbox04" />
    <label for="checkbox04" data-name="点点点点"></label>
    <input type="checkbox" id="checkbox05" />
    <label for="checkbox05" data-name="点点点点"></label>
    <input type="checkbox" id="checkbox06" />
    <label for="checkbox06" data-name="点点点点"></label>
    <input type="checkbox" id="checkbox07" />
    <label for="checkbox07" data-name="点点点点"></label>
    <input type="checkbox" id="checkbox08" />
    <label for="checkbox08" data-name="点点点点"></label>
    <input type="checkbox" id="checkbox09" />
    <label for="checkbox09" data-name="点点点点"></label>
    <input type="checkbox" id="checkbox10" />
    <label for="checkbox10" data-name="点点点点"></label>
    </div>
    </div>
    </body>
    </html>

  • 相关阅读:
    【jekins】jenkins构建触发
    【Autoit】Autoit 使用
    docker 网络和/etc/docker/daemon.json文件详情
    kubernetes(k8s)集群安全机制RBAC
    linux文件目录颜色及特殊权限对应的颜色
    Python 爬取各大代理IP网站(元类封装)
    K8S 容器之间通讯方式
    kubernetes Pod的升级与回滚
    lvs+keepalived+mariadb集群
    kubernetes(k8s)Pod污点与容忍
  • 原文地址:https://www.cnblogs.com/chenghu/p/5105690.html
Copyright © 2011-2022 走看看