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中常用的数据类型之整型(int),浮点型(float), 布尔值(bool), 复数(complex)
    requests库的基础使用
    socket,urllib,urllib3,request多种方法请求网页首页
    nginx日志切割
    gitlab社区版安装
    批量修改文件编码
    lvm磁盘扩展及添加磁盘lvm分区
    函数
    集合
    数据类型练习题
  • 原文地址:https://www.cnblogs.com/donglf/p/8144716.html
Copyright © 2011-2022 走看看