zoukankan      html  css  js  c++  java
  • checkbox 背景图片 纯CSS处理办法

    CSS

     .table_container input[type="checkbox"] {
       background: #fff url(/img/blue.png);
       background: none;
       *background: none;
     }
    
     .table_container .checkbox {
      min-height: 20px;
      padding-left: -20px;
      position: relative;
    }
    .table_container input[type="checkbox"]:checked + label:before,
    .table_container input[type="checkbox"]:not(:checked) + label:before {
      background: #fff url(/img/blue.png);
      content: " ";
      height: 20px;
      left: 0;
      position: absolute;
      width: 20px;
    }
    .table_container input[type="checkbox"]:checked + label:before {
      background-position: -22px 0;
    }
    
    .table_container input[type="checkbox"][disabled]:not(:checked) + label:before {
      background-position: -44px 0;
    }
    .table_container input[type="checkbox"][disabled]:checked + label:before {
      background-position: -66px 0;
    }

    HTML

    <div class="checkbox">
                    <input type="checkbox" name="table_cbox" id="table_cbox"  />
                    <label for="table_cbox"></label>
                </div>

  • 相关阅读:
    vue路由学习
    vue组件学习
    Vue常用特性
    Vue入门常用指令
    ES6新增语法
    如何搭建一个vue项目(完整步骤)
    OA办公系统
    java有序数组的有序交集
    javascript输出数据到文件
    node js 实现文件上传与反显
  • 原文地址:https://www.cnblogs.com/shenggen/p/4550081.html
Copyright © 2011-2022 走看看