欢迎光临杨雨的个人博客站!

杨雨个人网站-杨雨个人博客-杨照佳

杨雨个人博客网站

关注互联网和搜索引擎的个人博客网站

首页 > WEB开发 > css3案例分享 >

行使纯CSS美化radio和checkbox

发布时间:2016-11-28  编辑:杨雨个人博客网站   点击:   

单选框Radio和多选框checkbox必要美化吗?虽然,原生的样式百年稳固已经满意不了我们客户的需求。表单许多控件必要美化,我们有借助Javascript来做美化的,也有直接用CSS来美化的,本日我给各人先容行使纯CSS实现radio和checkbox的美化。

我们知道,许多行使JS来美化表单控件的要领都不是很抱负,必要借助引入js和Css,有的乃至行使图片和字体图标,并且还要依靠jQuery,并且伟大、可维护性差。

行使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代码,已经打包可以下载。CSS将checkbox和radio潜匿,然后行使:before和:after定位重绘checkbox和radio外面,从而到达美化结果,支持IE9+。

本文地址:http://itbyc.com/web/css3/13666.html
转载请注明出处。
分享是一种快乐,也是一种美德:
评论列表(网友评论仅供网友表达个人看法,并不表明本站同意其观点或证实其描述)
博客首页 | WEB开发 | 网站运营 | CMS使用教程 滇ICP备14002061号-1