图片代替多选(单选)按钮
1.多选按钮一般我们需要点中那个小方框,才可以选中该选项。那么我们能不能不点那个小方框,直接点该选项(文字或图片等)而进行选中呢?答案肯定是可以的,用label就可以实现,下面是一个简单的例子:
<label><input type="checkbox">同意服务条款</label> <br /> <input type="checkbox" id="checkforname" /> <label for="checkforname">不同意服务条款</label>
我们通过点击文字就能选中前面的方框,点击label标签中的文本,可使多选框聚焦。要使label的for 和选框的id名字对应。或者将label标签把选框和文本一起包围。
2.小方框太丑了我们能不能变成个图片呢,只要我们想~~~~一切都是可能的,看下面的例子
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style> .chk_div label{background: url(img/check_icogray.png) no-repeat; width: 232px; height: 32px; display: block; padding-left: 35px;padding-top: 5px;} .chk_div input[type=checkbox]:checked+label{background: url(img/check_icogreen.png) no-repeat;} </style> </head> <body> <div class="chk_div"> <input type="checkbox" value="dd" checked="checked" id="checkforbox" style="display: none;"> <label for="checkforbox">同意服务条款</label> </div> </body> </html>
我们利用了label,点击了label就等于点击了选择框,结合css的伪选择,就可以轻松的实现两个图片的点击切换(都不用js了O(∩_∩)O)