CSS3和jQuery实现的自定义美化Checkbox和Radiobox

现在经常可以在网络上看到一些非常奇特的表单元素，例如Checkbox复选框和Radiobox单选框，浏览器默认的样式确实是太丑了，而且更让人蛋疼的是各个浏览器的样式还不统一，考虑到现在越来越多的用户使用现代浏览器，所以我们可以大胆的用CSS3来自定义美化这些复选框和单选框，先来看看预览图：

是不是比默认的好看多了，个人的审美观应该还是可以的。

当然我们可以在这里查看DEMO演示。

接下来我们一起来看看实现这款美化版Checkbox的源代码。主要思路是利用隐藏原来的checkbox和radiobox，用一个div来模拟checkbox/radiobox，并使用jQuery来完成选择切换时的动画效果。

先来看看HTML代码：

<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></li><li><input type="checkbox" name="check-box" /> <span>Rock music</span></li><li><input type="checkbox" name="check-box" /> <span>Rap music</span></li><li><input type="checkbox" name="check-box" /> <span>Hiphop music</span></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');
});

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

这款checkbox和radiobox就介绍完了，另外还有一些也是类似的对checkbox和radiobox的重写，比较麻烦，大家可以自己去看：CSS3漂亮的自定义Checkbox复选框 9款迷人样式、纯CSS3美化Checkbox和Radiobox按钮外观很时尚。

最后把源代码分享上来吧，下载地址>>

新浪微博：http://weibo.com/u/5052963352

CSS3和jQuery实现的自定义美化Checkbox和Radiobox相关推荐

转载 - 使用HTML5、CSS3和jQuery增强网站用户体验
记得几年前如果你需要添加一些互动元素到你的网站中用来改善用户体验?是不是立刻就想到了flash实现?这彷佛年代久远的事了.使用现在最流行的Web技术HTML5,CSS3和jQuery,同样也可以实现类 ...
使用HTML5、CSS3和jQuery增强网站用户体验
记得几年前如果你需要添加一些互动元素到你的网站中用来改善用户体验?是不是立刻就想到了flash实现?这彷佛年代久远的事了.使用现在最流行的Web技术HTML5,CSS3和jQuery,同样也可以实现类 ...
html自定义标签提示,用简单的jquery+CSS创建自定义的a标签title提示tooltip_HTML/Xhtml_网页制作...
简介用简单的jquery+CSS创建自定义的a标签title提示,用来代替浏览器默认行为.如图: Javascript代码代码如下: $(function() { $("a[title] ...
地图标注源码 php,jQuery百度地图自定义标注信息代码
jQuery百度地图自定义标注信息代码是一款简单实用的百度地图api标注联系地址名称电话等信息代码. new BaiduMap({ id: "container2", title: ...
CSS3快速入门：三、美化网页
美化网页 CSS系列文章目录 CSS3快速入门:一.三种CSS导入方式 CSS3快速入门:二.CSS选择器 CSS3快速入门:三.美化网页 CSS3快速入门:四.盒子模型 CSS3快速入门:五.浮动 ...
一款由css3和jquery实现的响应式设计导航
2014年响应式设计成为设计主流.今天要给大家带来一款由css3和jquery实现的响应式设计导航.当显示器为pc时,导航为横条.当客户端为移动端时,呈现坚形导航.我们一起看下效果图: 在线预览 ...
jquery radio取值，checkbox取值，select取值，radio选中，checkbox选中，select选中
例:将多个选中的checkbox的值组装成一个字符串 <script type=text/javascript> function addMem(){ //var followers = ...
oracle form 滚动条,jQuery实现的自定义滚动条实例详解
本文实例讲述了jQuery实现的自定义滚动条.分享给大家供大家参考,具体如下: 可以自由的给滚动条定义背景,上下按钮,当然不仅仅是颜色,连图片当背景也可以.支持鼠标滚轮,点击滚动条滚轴定位,上下按钮久 ...
JQUERY获取text,areatext,radio,checkbox,select值
jquery radio取值,checkbox取值,select取值,radio选中,checkbox选中,select选中,及其相关获取一组radio被选中项的值 var item = $('in ...

CSS3和jQuery实现的自定义美化Checkbox和Radiobox

CSS3和jQuery实现的自定义美化Checkbox和Radiobox相关推荐

最新文章

热门文章