默认的checkbox可能不能满足UI需求,而默认的样式是不能直接修改的,那该如何修改呢?
在改样式之前我们建议先了解<label>标签属性。
我们发现,可以通过label来操控关联的表单控件,于是,我们的思路是:
把input的样式隐藏起来,通过设计label的样式(也就是input的样式)
然后通过定位用label覆盖input,这样功能和样式都是一致的。
这里我们以checkbox为例(其他input表单控件的默认样式修改思路时一样的!)
现在的结果是这样的
点击第二个label盒子也能操控input的选中和取消。接下来,我们给input隐藏,设置visibility:hidden即可,然后把label的位置移到input所在的位置。
这时候点击label是没有出现选中符号“√”的,我们要给选中时添加自己想要的图片既可以了:
.wrap input:checked+label{ // 这段代码是当input选中时,给input的相邻标签label加一个背景图片
background-image:url("check.png")
}
效果:
这样就完成了自定义的input样式。