自定义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;
            width: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;
            width: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浏览器
        }
    }

 

posted @ 2017-12-29 15:30  donglf  阅读(232)  评论(0编辑  收藏  举报