你的位置:首页 > 软件开发 > 网页设计 > 自定义表单样式之checkbox和radio

自定义表单样式之checkbox和radio

发布时间:2015-07-12 19:00:10
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 (#换成@)。

可能感兴趣文章

我的浏览记录