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的checked伪类实现OL的隐藏显示的方法
Dec 18 HTML / CSS
CSS3对背景图片的裁剪及尺寸和位置的设定方法
Mar 07 HTML / CSS
HTML5+CSS3 实现灵动的动画 TAB 切换效果(DEMO)
Sep 15 HTML / CSS
css3 pointer-events 介绍详解
Sep 18 HTML / CSS
解决margin 外边距合并问题
Jul 03 HTML / CSS
HTML5 与 XHTML2
Oct 17 HTML / CSS
HTML5 MiranaVideo播放器 (代码开源)
Jun 11 HTML / CSS
html5实现canvas阴影效果示例
May 07 HTML / CSS
html5视频常用API接口的实战示例
Mar 20 HTML / CSS
HTML5给汉字加拼音收起展开组件的实现代码
Apr 08 HTML / CSS
HTML5 直播疯狂点赞动画实现代码 附源码
Apr 14 HTML / CSS
HTML5实现应用程序缓存(Application Cache)
Jun 16 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测试程序运行时间的类
2012/02/05 PHP
php读取flash文件高宽帧数背景颜色的方法
2015/01/06 PHP
PHP中trim()函数简单使用指南
2015/04/16 PHP
对象的类型:本地对象(1)
2006/12/29 Javascript
js 模拟实现类似c#下的hashtable的简单功能代码
2010/01/24 Javascript
jQuery控制DIV层实现由大到小,由远及近动画变化效果
2015/10/09 Javascript
jQuery ajax MD5实现用户注册即时验证功能
2016/10/11 Javascript
JavaScript原生数组Array常用方法
2017/04/06 Javascript
js 发布订阅模式的实例讲解
2017/09/10 Javascript
javascript高仿热血传奇游戏实现代码
2018/02/22 Javascript
vue element 生成无线级左侧菜单的实现代码
2019/08/21 Javascript
Layui带搜索的下拉框的使用以及动态数据绑定方法
2019/09/28 Javascript
微信小程序自定义组件components(代码详解)
2019/10/21 Javascript
在Vue mounted方法中使用data变量详解
2019/11/05 Javascript
electron踩坑之dialog中的callback解决
2020/10/06 Javascript
用Python写飞机大战游戏之pygame入门(4):获取鼠标的位置及运动
2015/11/05 Python
Python 文件操作的详解及实例
2017/09/18 Python
python定时按日期备份MySQL数据并压缩
2019/04/19 Python
解决python中显示图片的plt.imshow plt.show()内存泄漏问题
2020/04/24 Python
python3让print输出不换行的方法
2020/08/24 Python
利用CSS的Sass预处理器(框架)来制作居中效果
2016/03/10 HTML / CSS
澳大利亚领先的在线葡萄酒零售商:Get Wines Direct
2018/03/27 全球购物
个人简历自我评价
2014/01/06 职场文书
教导处工作制度
2014/01/18 职场文书
安全资金保障制度
2014/01/23 职场文书
写自荐信三大法宝
2014/01/24 职场文书
厂长岗位职责
2014/02/19 职场文书
结婚喜宴主持词
2014/03/14 职场文书
霸王洗发水广告词
2014/03/14 职场文书
2014社区三八妇女节活动方案
2014/03/30 职场文书
超市仓管员岗位职责范本
2014/09/18 职场文书
倡议书作文
2015/01/19 职场文书
Python 如何利用ffmpeg 处理视频素材
2021/11/27 Python
最新最全的手机号验证正则表达式
2022/02/24 Javascript
分享3个非常实用的 Python 模块
2022/03/03 Python
vue数据字典取键值项目的字典问题
2022/04/12 Vue.js