css3和jquery实现自定义checkbox和radiobox组件


Posted in HTML / CSS onApril 22, 2014

主要思路是利用隐藏原来的checkbox和radiobox,用一个div来模拟checkbox/radiobox,并使用jQuery来完成选择切换时的动画效果。

复制代码
代码如下:

<ul>
<li>
<p>Gender:</p>
</li>
<li>
<input type="radio" name="radio-btn" />Male</li>
<li>
<input type="radio" name="radio-btn" />Female</li>
</ul>
<ul>
<li>
<p>Favorite music:</p>
</li>
<li>
<input type="checkbox" name="check-box" /> <span>Pop music</span></p> <p> </li>
<li>
<input type="checkbox" name="check-box" /> <span>Rock music</span></p> <p> </li>
<li>
<input type="checkbox" name="check-box" /> <span>Rap music</span></p> <p> </li>
<li>
<input type="checkbox" name="check-box" /> <span>Hiphop music</span></p> <p> </li>
</ul>

然后我们用jQuery代码来为每一个checkbox和radiobox创建一个div,这个div的classname为check-box和radio-btn。

复制代码
代码如下:

$('input[name="radio-btn"]').wrap('<div class="radio-btn"><i></i></div>');
$('input[name="check-box"]').wrap('<div class="check-box"><i></i></div>');

那么我们接下来要让原来的checkbox隐藏,同时设置模拟div的样式:

复制代码
代码如下:

.radio-btn input[type="radio"], .check-box input[type="checkbox"] {
visibility: hidden;
}

复制代码
代码如下:

.check-box {
width: 22px;
height: 22px;
cursor: pointer;
display: inline-block;
margin: 2px 7px 0 0;
position: relative;
overflow: hidden;
box-shadow: 0 0 1px #ccc;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;
background: rgb(255, 255, 255);
background: -moz-linear-gradient(top, rgba(255, 255, 255, 1) 0%, rgba(246, 246, 246, 1) 47%, rgba(237, 237, 237, 1) 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, rgba(255, 255, 255, 1)), color-stop(47%, rgba(246, 246, 246, 1)), color-stop(100%, rgba(237, 237, 237, 1)));
background: -webkit-linear-gradient(top, rgba(255, 255, 255, 1) 0%, rgba(246, 246, 246, 1) 47%, rgba(237, 237, 237, 1) 100%);
background: -o-linear-gradient(top, rgba(255, 255, 255, 1) 0%, rgba(246, 246, 246, 1) 47%, rgba(237, 237, 237, 1) 100%);
background: -ms-linear-gradient(top, rgba(255, 255, 255, 1) 0%, rgba(246, 246, 246, 1) 47%, rgba(237, 237, 237, 1) 100%);
background: linear-gradient(to bottom, rgba(255, 255, 255, 1) 0%, rgba(246, 246, 246, 1) 47%, rgba(237, 237, 237, 1) 100%);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffff', endColorstr='#ededed', GradientType=0);
border: 1px solid #ccc;
}
.check-box i {
background: url('css/check_mark.png') no-repeat center center;
position: absolute;
left: 3px;
bottom: -15px;
width: 16px;
height: 16px;
opacity: .5;
-webkit-transition: all 400ms ease-in-out;
-moz-transition: all 400ms ease-in-out;
-o-transition: all 400ms ease-in-out;
transition: all 400ms ease-in-out;
-webkit-transform:rotateZ(-180deg);
-moz-transform:rotateZ(-180deg);
-o-transform:rotateZ(-180deg);
transform:rotateZ(-180deg);
}
.checkedBox {
-moz-box-shadow: inset 0 0 5px 1px #ccc;
-webkit-box-shadow: inset 0 0 5px 1px #ccc;
box-shadow: inset 0 0 5px 1px #ccc;
border-bottom-color: #fff;
}
.checkedBox i {
bottom: 2px;
-webkit-transform:rotateZ(0deg);
-moz-transform:rotateZ(0deg);
-o-transform:rotateZ(0deg);
transform:rotateZ(0deg);
}
/*Custom radio button*/
.radio-btn {
width: 20px;
height: 20px;
display: inline-block;
float: left;
margin: 3px 7px 0 0;
cursor: pointer;
position: relative;
-webkit-border-radius: 100%;
-moz-border-radius: 100%;
border-radius: 100%;
border: 1px solid #ccc;
box-shadow: 0 0 1px #ccc;
background: rgb(255, 255, 255);
background: -moz-linear-gradient(top, rgba(255, 255, 255, 1) 0%, rgba(246, 246, 246, 1) 47%, rgba(237, 237, 237, 1) 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, rgba(255, 255, 255, 1)), color-stop(47%, rgba(246, 246, 246, 1)), color-stop(100%, rgba(237, 237, 237, 1)));
background: -webkit-linear-gradient(top, rgba(255, 255, 255, 1) 0%, rgba(246, 246, 246, 1) 47%, rgba(237, 237, 237, 1) 100%);
background: -o-linear-gradient(top, rgba(255, 255, 255, 1) 0%, rgba(246, 246, 246, 1) 47%, rgba(237, 237, 237, 1) 100%);
background: -ms-linear-gradient(top, rgba(255, 255, 255, 1) 0%, rgba(246, 246, 246, 1) 47%, rgba(237, 237, 237, 1) 100%);
background: linear-gradient(to bottom, rgba(255, 255, 255, 1) 0%, rgba(246, 246, 246, 1) 47%, rgba(237, 237, 237, 1) 100%);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffff', endColorstr='#ededed', GradientType=0);
}
.checkedRadio {
-moz-box-shadow: inset 0 0 5px 1px #ccc;
-webkit-box-shadow: inset 0 0 5px 1px #ccc;
box-shadow: inset 0 0 5px 1px #ccc;
}
.radio-btn i {
border: 1px solid #E1E2E4;
width: 10px;
height: 10px;
position: absolute;
left: 4px;
top: 4px;
-webkit-border-radius: 100%;
-moz-border-radius: 100%;
border-radius: 100%;
}
.checkedRadio i {
background-color: #898A8C;
}

上面这段CSS3代码就是用样式来自定义div,让div的样式和checkbox和radiobox一样。

最后我们来模拟点击选中和取消选中,这部分也是用jQuery来实现:

复制代码
代码如下:

$(".radio-btn").on('click', function () {
var _this = $(this),
block = _this.parent().parent();
block.find('input:radio').attr('checked', false);
block.find(".radio-btn").removeClass('checkedRadio');
_this.addClass('checkedRadio');
_this.find('input:radio').attr('checked', true);
});

复制代码
代码如下:

$.fn.toggleCheckbox = function () {
this.attr('checked', !this.attr('checked'));
}
$('.check-box').on('click', function () {
$(this).find(':checkbox').toggleCheckbox();
$(this).toggleClass('checkedBox');
});

这段代码可以让选中和取消选中时产生一点小小的动画。

HTML / CSS 相关文章推荐
CSS3媒体查询(Media Queries)介绍
Sep 12 HTML / CSS
CSS3 @keyframes简单动画实现
Feb 24 HTML / CSS
CSS3实现红包抖动效果
Dec 23 HTML / CSS
如何在网站上添加谷歌定位信息
Apr 16 HTML / CSS
通过Canvas及File API缩放并上传图片完整示例
Aug 08 HTML / CSS
一个不错的HTML5 Canvas多层点击事件监听实例
Apr 29 HTML / CSS
HTML5新特性之用SVG绘制微信logo
Feb 03 HTML / CSS
html5本地存储 localStorage操作使用详解
Sep 20 HTML / CSS
html5将图片转换成base64的实例代码
Sep 21 HTML / CSS
HTML5+CSS3:3D展示商品信息示例
Jan 03 HTML / CSS
HTML5开发动态音频图的实现
Jul 02 HTML / CSS
新的CSS 伪类函数 :is() 和 :where()示例详解
Aug 05 HTML / CSS
css3实现垂直下拉动画菜单示例
Apr 22 #HTML / CSS
纯CSS改变webkit内核浏览器的滚动条样式
Apr 17 #HTML / CSS
css3实现超立体3D图片侧翻倾斜效果
Apr 16 #HTML / CSS
纯CSS和jQuery实现的在页面顶部显示的进度条效果2例(仿手机浏览器进度条效果)
Apr 16 #HTML / CSS
纯CSS实现的大小渐变、渐远效果
Apr 15 #HTML / CSS
CSS中几个与换行有关的属性简明总结
Apr 15 #HTML / CSS
css3 条纹化和透明化表格Firefox下测试成功
Apr 15 #HTML / CSS
You might like
PHP导入Excel到MySQL的方法
2011/04/23 PHP
php获得url参数中具有&amp;的值的方法
2014/03/05 PHP
Laravel中正确地返回HTTP状态码方法示例
2019/09/10 PHP
prototype 的说明 js类
2006/09/07 Javascript
JavaScript中去掉数组中的重复值的实现方法
2011/08/03 Javascript
jquery中prop()方法和attr()方法的区别浅析
2013/09/06 Javascript
原生javascript实现简单的datagrid数据表格
2015/01/02 Javascript
jquery实现表单验证并阻止非法提交
2015/07/09 Javascript
jQuery实现HTML表格单元格的合并功能
2016/04/06 Javascript
第一次接触神奇的前端框架vue.js
2016/12/01 Javascript
微信小程序微信支付接入开发实例详解
2017/04/12 Javascript
简单实现jQuery弹窗效果
2017/10/30 jQuery
npm 更改默认全局路径以及国内镜像的方法
2018/05/16 Javascript
微信小程序实现红包雨功能
2018/07/11 Javascript
JavaScript链式调用实例浅析
2018/12/19 Javascript
零基础写python爬虫之HTTP异常处理
2014/11/05 Python
Python脚本实时处理log文件的方法
2016/11/21 Python
Python用户推荐系统曼哈顿算法实现完整代码
2017/12/01 Python
Python实现KNN邻近算法
2021/01/28 Python
python使用itchat实现手机控制电脑
2018/02/22 Python
Python进阶之自定义对象实现切片功能
2019/01/07 Python
解决python2 绘图title,xlabel,ylabel出现中文乱码的问题
2019/01/29 Python
python中property和setter装饰器用法
2019/12/19 Python
Nginx+Uwsgi+Django 项目部署到服务器的思路详解
2020/05/08 Python
你应该知道的30个css选择器
2014/03/19 HTML / CSS
HTML5进阶段内联标签汇总(小篇)
2016/07/13 HTML / CSS
澳大利亚在线购买儿童玩具:Toy Universe
2017/12/28 全球购物
英国No.1体育用品零售商:SportsDirect.com
2019/10/16 全球购物
德国亚马逊官方网站:Amazon.de
2020/11/15 全球购物
项目专员岗位职责
2013/12/04 职场文书
环境科学专业个人求职信
2013/12/15 职场文书
2014四风问题对照检查材料范文
2014/09/15 职场文书
党的群众路线教育实践活动个人自我剖析材料
2014/10/07 职场文书
开业庆典嘉宾致辞
2015/08/01 职场文书
民间借贷纠纷答辩状
2015/08/03 职场文书
2019年最新版见习人员管理制度!
2019/07/08 职场文书