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浏览器
            }
        }
    
  • 相关阅读:
    软件测试人员的年终绩效考核怎么应对
    收藏
    顶踩组件 前后两版
    订阅组件
    hdu 1963 Investment 完全背包
    hdu 4939 Stupid Tower Defense 动态规划
    hdu 4405 Aeroplane chess 动态规划
    cf 414B Mashmokh and ACM 动态规划
    BUPT 202 Chocolate Machine 动态规划
    hdu 3853 LOOPS 动态规划
  • 原文地址:https://www.cnblogs.com/donglf/p/8144716.html
Copyright © 2011-2022 走看看