zoukankan      html  css  js  c++  java
  • 自定义chceckbox, radio

    一、html

    <h3>Checkbox</h3>
    <div class="mycheck">
        <input type="checkbox" id="myCheck" name="demo" value="1">
        <label for="myCheck"></label>
        <button type="button" id="selectBox">选中</button>
        <input type="radio" id="myRadio" name="radiobox" value="2">
        <label for="myRadio" class="myRadio"></label>
    </div>
    

     二、css

    <style type="text/css">
            /*radio*/
            #myRadio + label{
                /*background-color: #999999;*/
                border-radius: 50%;
                border:1px solid #999999;
                20px;
                height:20px;
                display: inline-block;
                text-align: center;
                vertical-align: middle;
                line-height: 20px;
            }
            #myRadio:checked + label{
                background-color: #1f59a3;
            }
            #myRadio:checked + label:after{
                content:"2714";
                color: #ffffff;
            }
            /*checkbox*/
            #myCheck + label{
                /*background-color: #999999;*/
                border-radius: 2px;
                border:1px solid #999999;
                20px;
                height:20px;
                display: inline-block;
                text-align: center;
                vertical-align: middle;
                line-height: 20px;
            }
            #myCheck:checked + label{
                background-color: #1f59a3;
            }
            #myCheck:checked + label:after{
                content:"2714";
                color: #ffffff;
            }
            input[type="checkbox"]{
                display: none;
            }
    
        </style>
    

     三、js

    function IEVersion() {
            var userAgent = navigator.userAgent; //取得浏览器的userAgent字符串
            var isIE = userAgent.indexOf("compatible") > -1 && userAgent.indexOf("MSIE") > -1; //判断是否IE<11浏览器
            var isEdge = userAgent.indexOf("Edge") > -1 && !isIE; //判断是否IE的Edge浏览器
            var isIE11 = userAgent.indexOf('Trident') > -1 && userAgent.indexOf("rv:11.0") > -1;
            if(isIE) {
                var reIE = new RegExp("MSIE (\d+\.\d+);");
                reIE.test(userAgent);
                var fIEVersion = parseFloat(RegExp["$1"]);
                if(fIEVersion <= 8) {
                    $(".mycheck input").css("display", "inline-block");
                    $(".mycheck label").css("display", "none");
                }
            } else if(isEdge) {
                alert( 'edge');//edge
                $(".mycheck input").css("display", "inline-block");
                $(".mycheck label").css("display", "none");
            } else if(isIE11) {
                alert(11); //IE11
            }else{
                alert(-1);//不是ie浏览器
            }
        }
    
  • 相关阅读:
    Android--Android studio --布局管理
    Android--Android studio --Activity
    Android--Android studio --app运行
    Android--Android studio 工程目录分析
    Java--Niit-ch2--Location本地化问题
    C--循环实现和递归实现的比较
    C--函数调用
    【未完待续】Java蓝桥杯--算法训练 数学知识的运用
    【未完待续】Java蓝桥杯--算法训练(1)典型问题的递归框架
    NIIT2--JAVA活动(一)制作内部类 正则内部类
  • 原文地址:https://www.cnblogs.com/donglf/p/8144716.html
Copyright © 2011-2022 走看看