CSS3样式控制input按钮效果

最新推荐文章于 2024-07-29 10:40:54 发布

云飞扬扬

最新推荐文章于 2024-07-29 10:40:54 发布

阅读量3.3k

点赞数

分类专栏：前端

本文链接：https://blog.csdn.net/nickroprak/article/details/52487869

版权

前端专栏收录该内容

117 篇文章 3 订阅

订阅专栏

.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;}