1,起因最近在工作中要实现自定义式的radio样式,而我们通常使用的时默认的样式,因为自己实在想不到解决的方法,于是开始搜索,最终看到了不错的解决办法,可以完美解决我们遇到的问题。2,原理大家都知道在写结构的时候,radio或checkbox都会跟随label一起使用,label ...
1,起因
最近在工作中要实现自定义式的radio样式,而我们通常使用的时默认的样式,因为自己实在想不到解决的方法,于是开始搜索,最终看到了不错的解决办法,可以完美解决我们遇到的问题。
2,原理
大家都知道在写结构的时候,radio或checkbox都会跟随label一起使用,label的for属性值和input的id值相同的情况下,点击label就可以选中input,这里正是利用label 来覆盖我们的input默认样式,通过给label添加背景图片(美化的checkbox或radio),也就是在点击的过程中,我们是看不到默认的input的(给input设置z-index:-1),而点击的是label,通过不同的事件,加载不同的背景图片(这里是改变背景图片的位置)
3,设置美化checkbox或radio的默认样式
(1)页面结构
<form method="post"> <fieldset> <legend>Which genres do you like?</legend> <input type="checkbox" value="action" id="check-1" name="genre"><label for="check-1" >Action / Adventure</label> <input type="checkbox" value="comedy" id="check-2" name="genre"><label for="check-2" >Comedy</label> <input type="checkbox" value="epic" id="check-3" name="genre"><label for="check-3" >Epic / Historical</label> <input type="checkbox" value="science" id="check-4" name="genre"><label for="check-4" >Science Fiction</label> <input type="checkbox" value="romance" id="check-5" name="genre"><label for="check-5" >Romance</label> <input type="checkbox" value="western" id="check-6" name="genre"><label for="check-6" >Western</label> </fieldset> <fieldset> <legend>Caddyshack is the greatest movie of all time, right?</legend> <input type="radio" value="1" id="radio-1" name="opinions"><label for="radio-1" >Totally</label> <input type="radio" value="1" id="radio-2" name="opinions"><label for="radio-2" >You must be kidding</label> <input type="radio" value="1" id="radio-3" name="opinions"><label for="radio-3" >What's Caddyshack?</label> </fieldset></form>
原标题:自定义表单样式之checkbox和radio
关键词:
*特别声明:以上内容来自于网络收集,著作权属原作者所有,如有侵权,请联系我们:
admin#shaoqun.com
(#换成@)。