自定义checkbox 样式

客户说给checkbox radio 样式给统一下，之前一直嫌麻烦，今天写了下，记录下顺便，

directive('input',function(){
	return{
		restrict:'E',
		link:function(scope,element,attrs){
			if(attrs.type=="checkbox"){
				$(element).addClass('checkbox');
				$(element).wrap('<div class="checkboxwrap"></div>');
				scope.$watch(function(){return $(element).attr('checked')},function(newVal){
					if(newVal){
						$(element).parent().addClass('checkbox-checked');
					}else{
						$(element).parent().removeClass('checkbox-checked');
					}
				});
				scope.$watch(function(){return $(element).attr('disabled')},function(newVal){
					if(newVal){
						$(element).parent().addClass('checkbox-disabled');
					}else{
						$(element).parent().removeClass('checkbox-disabled');
					}
				})
			}
		}
	}
})

这是css代码

.checkbox{opacity:0.01;filter:alpha(opacity=1);}
.checkboxwrap{width:13px;height:13px;background:url(../../images/cds/checkbox.png) left top no-repeat;}
.checkboxwrap:hover{background-position:0 -13px;}
.checkboxwrap:active{background-position:0 -26px;}
.checkbox-checked{background-position:-13px 0;}
.checkbox-checked:hover{background-position:-13px -13px;}
.checkbox-checked:active{background-position:-13px -26px;}
.checkbox-disabled{background-position:0 -39px;}
.checkbox-disabled:hover{background-position:0 -39px;}
.checkbox-disabled:active{background-position:0 -39px;}

先给加了个checkbox class,给元素设成透明度0.01，看不见但是点击好使，在外边包了层div,给div 加样式，通过监控checkbox的checked和disabled 属性，给外边的div加class,用的是chrome 下checkbox的样式，搞出来跟真的似的，radio同理。

转载于:https://www.cnblogs.com/wssdzf/p/3730457.html