关于网页复选框css美化问题最简单有效的解决方案

11月/29日


切图网(qietu.com)讯:很多人都会觉得浏览器自带的表单样式例如单选框,复选框,下拉菜单等样式太丑,所以很多网页设计师一般都会对这几个元素进行美化处理,而偏偏单选框,复选框,下拉菜单是不能被css太多改变的几个元素。所以这个就涉及到更深入的web前端css/js解决方案。

近日【图图高清素材网】web前端项目就遇到了复选框样式的美化问题。看看切图网攻城师是如何有效解决它的美化问题的。下面说说思路。
<label class=”checkbox”><input type=”checkbox” name=”checkbox4″ id=”checkbox4″ checked=”checked” /></label>
如代码所示,在checkbox外面包了一个 label 标签, 如果不加任何 css 和 js 的话,这样写与浏览器自带的样式是没有任何区别的,只是这种写法,点击文字的时候复选框也可以被选中。
.checkbox{
background:url(../imgs/checkbox.gif) no-repeat; width:32px; height:31px; display:inline-block;
}
.checkbox input{
opacity:0; filter:alpha(opacity=0);
}
.checkbox.selected{
background:url(../imgs/checkbox_selected.gif) no-repeat;
}
开始美化,通过给 label 标签添加背景图,从而达到美化的效图,并为label绑定click事件在每次点击的时候,变换背景图。并且把复选框隐藏。

通过js来控制点击背景的变化。
$(‘.checkbox’).mousedown(function(){
if($(this).hasClass(‘selected’)){
$(this).removeClass(‘selected’);
}
else{
$(this).addClass(‘selected’);
}
})
这个方法非常的灵活,不用使用js插件,并且很适用于web前端开发中使用。童鞋你学到了吗。

切图网始于2007年, 前端外包 服务拓荒者、领航者,提供专业的前端外包服务,微信公众号 qietuwang