php radiobox,CSS_css3和jquery实现自定义checkbox和radiobox组件，主要思路是利用隐藏原来的chec - phpStudy...

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

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

复制代码代码如下:

• Gender:

• Male

• Female

• Favorite music:

• Pop music

• Rock music

• Rap music

• Hiphop music

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

复制代码代码如下:

$('input[name="radio-btn"]').wrap('

$('input[name="check-box"]').wrap('

那么我们接下来要让原来的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');

});

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

纯CSS图片预加载实例 摆脱Javascript预载的束缚

Android Handler之消息循环的深入解析

PHP PDOStatement对象bindpram()、bindvalue()和bindcolumn之间的区别

php之CodeIgniter学习笔记

解析PHP中$_FILES的使用以及注意事项

asp.net根据日期算出天数的小例子

win7电脑页面没有毛玻璃效果不变透明怎么办？

MAC将最近使用的应用程序整合到Stack放在一个文件夹里

sprng和struts有什么区别？

ThinkPHP V2.2说明文档没有说明的那些事实例小结

BootStrap Progressbar 实现大文件上传的进度条的实例代码

ExtJS中设置下拉列表框不可编辑的方法

jQuery中data()方法用法实例

Html5大文件断点续传实现方法