CheckBox的按钮自定义样式
刚在博客园里学习了一种CheckBox的按钮自定义方法,用于随笔记下来,方便自己以后可以更好的复习;
一个HTML文档内容为几个CheckBox的HTML文档,内容如下:
<div class="wrap">
<input type="checkbox" id="checkbox01">
<label for="checkbox01"></label>
<input type="checkbox" id="checkbox02">
<label for="checkbox02"></label>
<input type="checkbox" id="checkbox03">
<label for="checkbox03"></label>
</div>
然后的css样式为:
.wrap{width:300px;background:#eee;border:2px solid #ddd;}
input[type="checkbox"]{display:hidden;} //把input框隐藏掉,用label来定义新的单选框按钮样式;
label{display:inline-block;width:60px;height:60px;background:url(../images/123.jpg);background-size:100% 100%;background-position:0 0px; -webkit-transition:background 0.5s linear;}
input[type="checkbox"]:checked+label{background-position:0 -60px} //若是点击了单选框,则改变图片的位置,实现单选框样式定义
然后你想要的一个复选框样式就可以美美哒了,基本上IE9以上的浏览器都可以正常显示;