CSS3样式控制input按钮效果

来源：互联网发布：淘宝店铺类目怎么修改编辑：程序博客网时间：2024/06/10 20:19
.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;}
0 0