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;
    }


    用到的图片


  • 相关阅读:
    python动态规划解决矩阵连乘
    ISCC2019-digdigdig
    MultiSelectComboBox(一)
    中国地图 xaml Canvas
    NotificationObject.cs
    DelegateCommand.cs
    SQL-PIVOT 数据透视 行列转换
    中国行政区域(省,市,县)SQL
    WCF自定义地址路由映射(不用svc文件)
    java下载安装,环境变量,hello world
  • 原文地址:https://www.cnblogs.com/yanergui/p/5624757.html
Copyright © 2011-2022 走看看