CSS3样式控制input按钮效果

待我称王封你为后i 2022-09-25 12:21 277阅读 0赞

.clearfix:before,
    .clearfix:after {
      display: table;
      content: " ";
    }
    
    .clearfix:after {
      clear: both;
    }
    /* 多选框 */
    /* example:<label><input type="checkbox" class="switch" id="" name=""><span></span> 同意</label> */
    input[type="checkbox"].switch{position: absolute; opacity: 0;-moz-opacity: 0;-webkit-opacity: 0;filter:alpha(opacity=0);width: 20px;height: 20px;margin: 0;margin-left: 0 !important;cursor: pointer;}
    input[type="checkbox"].switch+span{background: url(../img/sprites.png) no-repeat -155px 0px;vertical-align: top;display: inline-block; width: 20px; height: 20px;}
    input[type="checkbox"].switch:checked+span{background: url(../img/sprites.png) no-repeat -105px 0px;}
    input[type="checkbox"].switch:disabled+span{background: url(../img/sprites.png) no-repeat -180px 0px;}
    input[type="checkbox"].switch:disabled:checked+span{background: url(../img/sprites.png) no-repeat -130px 0px;}
    .checkbox-normal{background: url(../img/sprites.png) no-repeat -155px 0px !important;}
    .checkbox-checked{background: url(../img/sprites.png) no-repeat -105px 0px !important;}
    .checkbox-disabled{background: url(../img/sprites.png) no-repeat -180px 0px !important;}
    .checkbox-checked-disabled{background: url(../img/sprites.png) no-repeat -130px 0px !important;}
    /* 单选框 */
    /* example:<label><input type="radio" class="switch" id="" name=""><span></span> 男</label> */
    /* 单选取消：
    var tempradio= null;
    $("input[type='radio']").click(function(){
        if(tempradio==this){
            $(this).prop('checked',false);
            if ($.browser.msie && $.browser.version <= 9) {
            	$(this).next("span").attr('class', '');
            }
            tempradio=null;
        }else{
            $(this).prop('checked',true);
            if ($.browser.msie && $.browser.version <= 9) {
            	$(this).next("span").addClass("radio-checked");
            }
            tempradio=this;
        }
    }) */
    input[type="radio"].switch{position: absolute; opacity: 0;-moz-opacity: 0;-webkit-opacity: 0;filter:alpha(opacity=0);width: 20px;height: 20px;margin: 0;margin-left: 0 !important;cursor: pointer;}
    input[type="radio"].switch+span{background: url(../img/sprites.png) no-repeat -155px -25px;vertical-align: top;display: inline-block; width: 20px; height: 20px;}
    input[type="radio"].switch:checked+span{background: url(../img/sprites.png) no-repeat -105px -25px;}
    input[type="radio"].switch:disabled+span{background: url(../img/sprites.png) no-repeat -180px -25px;}
    input[type="radio"].switch:disabled:checked+span{background: url(../img/sprites.png) no-repeat -130px -25px;}
    .radio-normal{background: url(../img/sprites.png) no-repeat -155px 25px !important;}
    .radio-checked{background: url(../img/sprites.png) no-repeat -105px -25px !important;}
    .radio-disabled{background: url(../img/sprites.png) no-repeat -180px -25px !important;}
    .radio-checked-disabled{background: url(../img/sprites.png) no-repeat -130px -25px !important;}