zoukankan      html  css  js  c++  java
  • 自定义 css checkbox 样式

    .checkbox{
            -webkit-appearance: none;
            appearance: none;
             18px;
            height: 18px;
            margin: 0;
            cursor: pointer;
            vertical-align: bottom;
            background: #fff;
            border: 1px solid #DADADA;
            -webkit-border-radius: 1px;
            -moz-border-radius: 1px;
            -webkit-box-sizing: border-box;
            -moz-box-sizing: border-box;
            box-sizing: border-box;
            position: relative;
            overflow:hidden;
    }
    
    .checkbox:active {
            border-color: #DADADA;
            background: #ebebeb;
    }       
            
    .checkbox:hover {
            border-color: #0E76A8;
            -webkit-box-shadow: inset 0 2px 2px rgba(0,0,0,0.1);
            -moz-box-shadow: inset 0 2px 2px rgba(0,0,0,0.1);
            box-shadow: inset 0 2px 2px rgba(0,0,0,0.1);
    }
    
    .checkbox:checked {
            background: #fff;
    }
    
    .checkbox:checked::after {
            content: url(../images/blue.png);
            position: absolute;
            top: -1px;
            right: 0px;
            left: -1px;
            display: block;        
    }
    .checkbox:focus {
            outline: none;
            border-color: #DADADA;
    }
     .radio{
            -webkit-appearance: none;
            appearance: none;
             18px;
            height: 18px;
            border-radius:10px;
            margin: 0;
            cursor: pointer;
            vertical-align: bottom;
            background: #fff;
            border: 1px solid #DADADA;
            -webkit-border-radius:10px;
            -moz-border-radius:10px;
            -webkit-box-sizing: border-box;
            position: relative;
            overflow:hidden;
    }
    
    .radio:active {
            border-color: #DADADA;
            background: #ebebeb;
    }       
            
    .radio:hover {
            border-color: #0E76A8;
            -webkit-box-shadow: inset 0 2px 2px rgba(0,0,0,0.1);
            -moz-box-shadow: inset 0 2px 2px rgba(0,0,0,0.1);
            box-shadow: inset 0 2px 2px rgba(0,0,0,0.1);
    }
    
    .radio:checked {
            background: #fff;
    }
    
    .radio:checked::after {
            content: url(../images/blue.png);
            position: absolute;
            top:-1px;
            right: 0px;
            left: -21px;
            display: block;
                    
    }
    .radio:focus {
            outline: none;
            border-color: #DADADA;
    }


    用到的图片


  • 相关阅读:
    迁移Veil:手工打造Windows下编译的免杀Payload
    设置快速的debian源的方法:
    最新织梦的一个延时注入
    关于web后门权限防删的一个新思路
    安全狗两个中危提权+NET提权
    python抓取中文网页乱码通用解决方法
    SSRF漏洞的挖掘经验
    Hive中自定义Map/Reduce示例 In Java
    Hive学习之Locking
    Cloudera Manager及CDH最新版本安装全程记录
  • 原文地址:https://www.cnblogs.com/yanergui/p/5624757.html
Copyright © 2011-2022 走看看