checkbox和radio浏览器默认的已经满足不了大众的审美需求，更不用说浏览器之间的差异化，取而代之，优化checkbox和radio的方法也随之诞生了。
html结构：
单选框为例，简单说明：
其中必需项包括：class="radio" 和 name="名称"
<div class="radio" name="sex" value="boy"><ins></ins><span>帅哥</span></div> <div class="radio" name="sex" value="girl"><ins></ins><span>靓妹</span></div> <div class="radio" name="sex" value="unsex"><ins class="disabled"></ins><span>未选中不可点击</span></div> <div class="radio" name="sex" value="sexed"><ins class="enable"></ins><span>选中不可点击</span></div>
css表现：
transition介绍：元素从一种样式逐渐改变为另一种的效果。
transition 简写属性，用于在一个属性中设置四个过渡属性。
transition-property 规定应用过渡的 CSS 属性的名称。
transition-duration 定义过渡效果花费的时间。默认是 0。
transition-timing-function 规定过渡效果的时间曲线。默认是 "ease"。
transition-delay 规定过渡效果何时开始。默认是 0。
.checkbox,.radio{display: inline-block;*display: inline;*zoom:1;height: 24px; line-height: 24px; margin-right: 20px;}
.checkbox ins,.radio ins{display: inline-block;*display: inline;*zoom:1; width: 23px; height: 22px; vertical-align: middle; background: url(http://www.bootcss.com/p/icheck/skins/square/blue.png) no-repeat; margin-right: 8px; -webkit-transition:all 0.1s linear; -moz-transition:all 0.1s linear; -o-transition:all 0.1s linear; -ms-transition:all 0.1s linear; transition:all 0.1s linear;vertical-align: middle;}
.radio ins{background-position: -120px 0px; }
.radio .hover{background-position: -144px 0px;}
.radio .checked{background-position: -168px 0px;}
.radio .enable{background-position: -214px 0px;}
.radio .disabled{background-position: -191px 0px;}
.checkbox span,.radio span{display: inline-block;*display: inline;*zoom:1;vertical-align: middle; }
js代码：
点击事件，鼠标移入移出事件，备注：移动端仅支持点击即可。
点击事件为例：document.on("click",".radio",function(){...})
click: function(elem) {
var _this = this;
elem = "." + elem;
$(document).on("click", elem, function() {
var $this = $(this),
_ins = $this.find("ins");
if (!(_ins.hasClass(_this._disabled) || _ins.hasClass(_this._enable))) {
if ( !! _ins.hasClass(_this._checked)) {
_ins.removeClass(_this._checked).addClass(_this._hover);
} else {
if (/radio/ig.test(elem)) {
var _name = $this.attr("name");
$(elem + "[name=" + _name + "]").find("ins").removeClass(_this._checked);
}
$(elem).find("ins").removeClass(_this._hover);
_ins.addClass(_this._checked);
}
}
});
}
DEMO：
来源：https://www.cnblogs.com/kuikui/p/3506365.html