浅谈magic-check——美化单选款、复选框
来源:互联网 发布:沪金td数据从哪能下载 编辑:程序博客网 时间:2024/06/05 09:23
查看原文
查看在线演示Demo和更多原文内容教程:浅谈magic-check——美化单选款、复选框
单选框Radio和多选框checkbox需要美化吗?当然,原生的样式百年不变已经满足不了我们客户的需求。表单很多控件需要美化,我们有借 助Javascript来做美化的,也有直接用CSS来美化的,今天我给大家介绍使用纯CSS实现radio和checkbox的美化。
HTML
<div id="main"> <div class="demo"> <div class="col"> <h4>Checkbox</h4> <div class="opt"> <input class="magic-checkbox" type="checkbox" name="layout" id="c1"> <label for="c1">Normal</label> </div> <div class="opt"> <input class="magic-checkbox" type="checkbox" name="layout" id="c2" checked> <label for="c2">Checked</label> </div> <div class="opt"> <input class="magic-checkbox" type="checkbox" name="layout" id="c3" value="option2" disabled> <label for="c3" style="color:#ccc">Disabled</label> </div> <div class="opt"> <input class="magic-checkbox" type="checkbox" name="layout" id="c4" checked disabled> <label for="c4" style="color:#ccc">Checked && Disabled</label> </div> </div> <div class="col"> <h4>Radio</h4> <div class="opt"> <input class="magic-radio" type="radio" name="radio" id="r1" value="option1"> <label for="r1">Normal</label> </div> <div class="opt"> <input class="magic-radio" type="radio" name="radio" id="r2" value="option2" checked> <label for="r2">Checked</label> </div> <div class="opt"> <input class="magic-radio" type="radio" name="radio" id="r3" value="option3" disabled> <label for="r3" style="color:#ccc">禁用</label> </div> <div class="opt"> <input class="magic-radio" type="radio" id="r4" value="option4" checked disabled> <label for="r4" style="color:#ccc">Checked && Disabled</label> </div> </div> </div></div>
CSS
@keyframes hover-color { from { border-color: #c0c0c0; } to { border-color: #3e97eb; } }.magic-radio,.magic-checkbox { position: absolute; display: none; }.magic-radio[disabled],.magic-checkbox[disabled] { cursor: not-allowed; }.magic-radio + label,.magic-checkbox + label { position: relative; display: block; padding-left: 30px; cursor: pointer; vertical-align: middle; } .magic-radio + label:hover:before, .magic-checkbox + label:hover:before { animation-duration: 0.4s; animation-fill-mode: both; animation-name: hover-color; } .magic-radio + label:before, .magic-checkbox + label:before { position: absolute; top: 0; left: 0; display: inline-block; width: 20px; height: 20px; content: ''; border: 1px solid #c0c0c0; } .magic-radio + label:after, .magic-checkbox + label:after { position: absolute; display: none; content: ''; }.magic-radio[disabled] + label,.magic-checkbox[disabled] + label { cursor: not-allowed; color: #e4e4e4; } .magic-radio[disabled] + label:hover, .magic-radio[disabled] + label:before, .magic-radio[disabled] + label:after, .magic-checkbox[disabled] + label:hover, .magic-checkbox[disabled] + label:before, .magic-checkbox[disabled] + label:after { cursor: not-allowed; } .magic-radio[disabled] + label:hover:before, .magic-checkbox[disabled] + label:hover:before { border: 1px solid #e4e4e4; animation-name: none; } .magic-radio[disabled] + label:before, .magic-checkbox[disabled] + label:before { border-color: #e4e4e4; }.magic-radio:checked + label:before,.magic-checkbox:checked + label:before { animation-name: none; }.magic-radio:checked + label:after,.magic-checkbox:checked + label:after { display: block; }.magic-radio + label:before { border-radius: 50%; }.magic-radio + label:after { top: 7px; left: 7px; width: 8px; height: 8px; border-radius: 50%; background: #3e97eb; }.magic-radio:checked + label:before { border: 1px solid #3e97eb; }.magic-radio:checked[disabled] + label:before { border: 1px solid #c9e2f9; }.magic-radio:checked[disabled] + label:after { background: #c9e2f9; }.magic-checkbox + label:before { border-radius: 3px; }.magic-checkbox + label:after { top: 2px; left: 7px; box-sizing: border-box; width: 6px; height: 12px; transform: rotate(45deg); border-width: 2px; border-style: solid; border-color: #fff; border-top: 0; border-left: 0; }.magic-checkbox:checked + label:before { border: #3e97eb; background: #3e97eb; }.magic-checkbox:checked[disabled] + label:before { border: #c9e2f9; background: #c9e2f9; }body{line-height: 2em; padding: 30px;}
我们知道,很多使用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://www.w3cfuns.com/notes.php?mod=view&u=15399&id=ec9943568a2304020017cfe362fe39c8
0 0
- 浅谈magic-check——美化单选款、复选框
- css美化单选款、复选框
- 单、复选框美化
- 美化复选框
- 复选框的美化
- 单,复选框的美化
- 表单美化至--复选框
- [MFC] Check Box 复选框
- 美化复选框(给复选框添加样式)
- CSS3自定义美化复选框Checkbox组合
- 使用CSS3美化复选框checkbox
- 前端案例--纯CSS3美化复选框
- 单选框,复选框,下拉列表的美化
- check box 多样式复选框
- MFC Check-box Control 复选框操作
- Check复选框的监听实现
- 带check(复选框)的ListBox
- MFC中复选框Check控件用法
- Cubietruck---11. Linux3.3_serail串口驱动分析
- iOS 角度与弧度的转换
- iOS 进度框(二) SVProgressHUD
- Android开发---ListView实现局部刷新及删除
- JSP九大内置对象及四个作用域
- 浅谈magic-check——美化单选款、复选框
- 10分钟理解 - GIT or GIT 实战
- oracle出现IOU 10150错误,要彻底删除oracle注册信息
- php 新浪微博第三方登录验证/OAuth2.0
- Cubietruck---12. boot1源码流程简略分析
- Android Studio如何取消与SVN的关联
- 前端入门DAY2-CSS
- 有关国内的流氓软件和强制安装软件(上传附件防部分流氓软件)
- 欢迎使用CSDN-markdown编辑器