用CSS美化radio和checkbox

时间:2016-12-23 16:51:09 类型:HTML/CSS
字号:    

      我们在实际的工作过程中,表单的很多控件都需要美化、修饰,以满足更多的客户需求,今天介绍一下单选框Radio和多选框checkbox的美化的方法,供大家参考、学习。

使用magic-check

       magic-check只用了几十行CSS代码就可以实现checkbox和radio表单的美化。首先载入css文件。

<link rel="stylesheet" type="text/css" href="magic-check.css"> 
现在用input元素加上一个CSS类magic-checkbox或magic-radio就可以.

Radio


<input class="magic-radio" type="radio" name="radio" id="r1">  
<label for="r1">Normal</label>


Checkbox

<input class="magic-checkbox" type="checkbox" name="layout" id="c1">  
<label for="c1">Normal</label> 
CSS将checkbox和radio隐藏,然后使用:before和:after定位重绘checkbox和radio外观,从而达到美化效果


更多关于PHP开发WEB前端开发相关技术问题,可点击:http://www.ncyteng.com

如果有技术疑问,欢迎在下方评论框留言,我们会及时回答您的问题。

咨询QQ:1939594233(微信同号)