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浏览器
            }
        }
    
  • 相关阅读:
    vue定义data的三种方式与区别
    利用Python开发App实战
    序列化:ProtoBuf 与 JSON 的比较 !
    年轻人不讲武德,where 1=1 是什么鬼?
    Java 生成随机数的 5 种方式,你知道几种?
    卸载 Navicat!事实已证明,正版客户端,它更牛逼……
    MySQL大表优化方案
    鹅厂是如何使用 Git 的?
    灵魂一问:一个TCP连接可以发多少个HTTP请求?
    新来的老大说,“公司以后禁止使用Lombok”,我表示反对~
  • 原文地址:https://www.cnblogs.com/donglf/p/8144716.html
Copyright © 2011-2022 走看看