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浏览器
            }
        }
    
  • 相关阅读:
    Python学习笔记:重复索引处理方法
    爬虫学习笔记:8684公交路线
    爬虫学习笔记:创建随机UserAgent池
    Python学习笔记:pandas.to_csv设置encoding='utf8sig'解决中文乱码问题
    Python学习笔记:利用pd.assign新增一列
    查看端口
    进程与线程的一个简单解释
    设计模式工厂方法模式(Factory Method)
    Java抽象类与接口的区别
    十个JDBC的最佳实践
  • 原文地址:https://www.cnblogs.com/donglf/p/8144716.html
Copyright © 2011-2022 走看看