原始的单选框Radio和多选框checkbox样式百年不变已经满足不了我们客户的审美了。表单很多控件需要美化,我们经常借助Javascript来美化它,也有直接用CSS来美化,更多的是直接拿插件来改变它的外貌,毕竟大牛横行的时代封装的插件显得更加高效便捷,但是也有像编编这样不甘于插件式的一站服务,选择更加便捷轻巧的css来解决不是大问题的棘手问题。今天给大家整理的也是工作中使用并总结出来的纯CSS或者简单的js实现radio和checkbox的美化的方法,希望能更便捷的帮助到大家的日常工作。
方式1:用div模拟单选复选框的效果。
HTML代码
必需要有:class="radio" 和 name属性
<!--checkBox HTML代码-->
<div class="sport">
<div class="checkbox" name="sport" value="basketball">
<ins></ins>
<span>看电影</span></div>
<div class="checkbox" name="sport" value="football">
<ins></ins>
<span>购物</span></div>
<div class="checkbox" name="sport" value="volleyball">
<ins></ins>
<span>骑行</span></div>
<div class="checkbox" name="sport" value="unsport">
<ins class="disabled"></ins>
<span>未选中且不可点击状态</span></div>
<div class="checkbox" name="sport" value="sported">
<ins class="enable"></ins>
<span>选中且不可点击状态</span></div>
</div>
<!-- radio HTML代码-->
<div class="sex">
<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>
</div>
css代码:
用css的transtion为移入及选中添加动态效果。
transition-property 规定过渡属性名称。
transition-duration 定义过渡效果花费时间,默认是 0。
transition-timing-function 规定过渡时间曲线,默认是 "ease"。
transition-delay 规定过渡开始事件,默认是 0。
.checkbox, .radio{display: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://oh6zi3ry9.bkt.clouddn.com/red.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;}
.checkbox ins{background-position: 0px 0px;}
.radio ins{background-position: -120px 0px;}
.checkbox .hover{background-position: -24px 0px;}
.checkbox .checked{background-position: -48px 0px;}
.checkbox .enable{background-position: -96px 0px;}
.checkbox .disabled{background-position: -72px 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;}
.sport, .sex{width: 950px;margin: 100px auto;}
JS代码:
包含点击事件和移入事件
(function ($) {
$.icheck = {
init: function () {
var _this = this;
_this._checkbox = "checkbox";
_this._radio = "radio";
_this._disabled = "disabled";
_this._enable = "enable";
_this._checked = "checked";
_this._hover = "hover";
_this._arrtype = [_this._checkbox, _this._radio];
_this._mobile = /ipad|iphone|ipod|android|blackberry|windows phone|opera mini|silk/i.test(navigator.userAgent);
$.each(_this._arrtype, function (k, v) {
_this.click(v);
if (!_this._mobile) {
_this.mouseover(v);
_this.mouseout(v);
}
});
},
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);
}
}
});
},
mouseover: function (elem) {
var _this = this;
elem = "." + elem;
$(document).on("mouseover", elem, function () {
var $this = $(this);
var _ins = $this.find("ins");
if (!(_ins.hasClass(_this._disabled) || _ins.hasClass(_this._enable) || _ins.hasClass(_this._checked))) {
_ins.addClass(_this._hover);
$this.css("cursor", "pointer");
} else {
$this.css("cursor", "default");
}
});
},
mouseout: function (elem) {
var _this = this;
elem = "." + elem;
$(document).on("mouseout", elem, function () {
$(elem).find("ins").removeClass(_this._hover);
});
}
};
$.icheck.init();
})(jQuery);
效果如图:
PS :兼容大多数主流浏览器及IE6+等浏览器。
方法二:利用CSS3我们可以打造个性化表单。
CSS3美化checkbox和Radiobox的原理很简单,在页面上新建一个checkbox和radiobox并给予他们默认的label标签显示文字,然后将checkbox和radiobox隐藏,再利用CSS3来美化label标签,这样,我们就自定义了checkbox和radiobox。
HTML代码:
<!--checkbox-->
<div style="margin: 50px;">
<input type="checkbox" id="checkbox2-1" class="regular-checkbox big-checkbox" /><label for="checkbox2-1"></label>
<input type="checkbox" id="checkbox2-2" class="regular-checkbox big-checkbox" /><label for="checkbox2-2"></label>
<input type="checkbox" id="checkbox2-3" class="regular-checkbox big-checkbox" /><label for="checkbox2-3"></label>
<input type="checkbox" id="checkbox2-4" class="regular-checkbox big-checkbox" /><label for="checkbox2-4"></label>
</div>
<!--radio-->
<div class="button-holder" style="margin: 0 50px;">
<input type="radio" id="radio2-1" name="radio2" class="regular-radio big-radio" /><label for="radio2-1"></label><br />
<input type="radio" id="radio2-2" name="radio2" class="regular-radio big-radio" /><label for="radio2-2"></label><br />
<input type="radio" id="radio2-3" name="radio2" class="regular-radio big-radio" checked /><label for="radio2-3"></label><br />
<input type="radio" id="radio2-4" name="radio2" class="regular-radio big-radio" /><label for="radio2-4"></label><br />
<input type="radio" id="radio2-5" name="radio2" class="regular-radio big-radio" /><label for="radio2-5"></label><br />
</div>
css代码:
将input框隐藏,定义label实现框体的美化,label的for属性指向对应的id实现事件的绑定。
body{background: #fff;padding: 0;margin: 0;}
#holder{width: 100%;}
#holder > div{clear: both;padding: 2%;margin-bottom: 20px;border-bottom: 1px solid #eee;float: left;width: 96%;}
label{display: inline;}
.regular-checkbox{display: none;}
.regular-checkbox + label{background-color: #fafafa;border: 1px solid #ce455a;box-shadow: 0 1px 2px rgba(0,0,0,0.05), inset 0px -15px 10px -12px rgba(0,0,0,0.05);padding: 9px;border-radius: 3px;display: inline-block;position: relative;}
.regular-checkbox + label:active, .regular-checkbox:checked + label:active{box-shadow: 0 1px 2px rgba(0,0,0,0.05), inset 0px 1px 3px rgba(0,0,0,0.1);}
.regular-checkbox:checked + label{border: 1px solid #ce455a;color: #ce455a;}
.regular-checkbox:checked + label:after{content: '\2714';font-size: 14px;position: absolute;top: 0px;left: 3px;color: #ce455a;}
.big-checkbox + label{padding: 18px;}
.big-checkbox:checked + label:after{font-size: 28px;left: 6px;}
.tag{font-family: Arial, sans-serif;width: 200px;position: relative;top: 5px;font-weight: bold;text-transform: uppercase;display: block;float: left;}
.radio-1{width: 193px;}
.button-holder{float: left;}
/* RADIO*/
.regular-radio{display: none;}
.regular-radio + label{-webkit-appearance: none;background-color: #fafafa;border: 1px solid #ce455a;padding: 9px;border-radius: 50px;display: inline-block;position: relative;}
.regular-radio:checked + label:after{content: ' ';width: 12px;height: 12px;border-radius: 50px;position: absolute;top: 3px;background: #ce455a;text-shadow: 0px;left: 3px;font-size: 32px;}
.regular-radio:checked + label{color: #ce455a;border: 1px solid #ce455a;}
.regular-radio + label:active, .regular-radio:checked + label:active{}
.big-radio + label{padding: 16px;}
.big-radio:checked + label:after{width: 24px;height: 24px;left: 4px;top: 4px;}
/* ------- IGNORE*/
#header{width: 100%;margin: 0px auto;}
#header #center{text-align: center;}
#header h1 span{color: #000;display: block;font-size: 50px;}
#header p{font-family: 'Georgia', serif;}
#header h1{color: #892dbf;font: bold 40px 'Bree Serif', serif;}
#travel{padding: 10px;background: rgba(0,0,0,0.6);border-bottom: 2px solid rgba(0,0,0,0.2);font-variant: normal;text-decoration: none;margin-bottom: 20px;}
#travel a{font-family: 'Georgia', serif;text-decoration: none;border-bottom: 1px solid #f9f9f9;color: #f9f9f9;}
效果如图:
PS :只兼容IE9及以上浏览器、chrome、火狐等主流浏览器。但因为是纯css实现的美化,不会影响到页面其他功能的实现,比较适用移动端和对兼容性要求不高的页面。
方法三:重绘
CSS将checkbox和radio隐藏,然后使用:before和:after定位重绘checkbox和radio外观,从而达到美化效果,支持IE9+。
HTML代码:
<div class="demo">
<div class="col">
<h4>Checkbox美化</h4>
<div class="opt">
<input class="g-checkbox" type="checkbox" name="layout" id="c1">
<label for="c1">备选状态</label>
</div>
<div class="opt">
<input class="g-checkbox" type="checkbox" name="layout" id="c2" checked>
<label for="c2">选中状态</label>
</div>
<div class="opt">
<input class="g-checkbox" type="checkbox" name="layout" id="c3" value="option2" disabled>
<label for="c3" style="color:#ccc">不可选</label>
</div>
<div class="opt">
<input class="g-checkbox" type="checkbox" name="layout" id="c4" checked disabled>
<label for="c4" style="color:#ccc">必须选</label>
</div>
</div>
<div class="col">
<h4>Radio美化</h4>
<div class="opt">
<input class="g-radio" type="radio" name="radio" id="r1" value="option1">
<label for="r1">备选状态</label>
</div>
<div class="opt">
<input class="g-radio" type="radio" name="radio" id="r2" value="option2" checked>
<label for="r2">选中状态</label>
</div>
<div class="opt">
<input class="g-radio" type="radio" name="radio" id="r3" value="option3" disabled>
<label for="r3" style="color:#ccc">禁用状态</label>
</div>
<div class="opt">
<input class="g-radio" type="radio" id="r4" value="option4" checked disabled>
<label for="r4" style="color:#ccc">Checked && Disabled</label>
</div>
</div>
</div>
css代码:
@keyframes hover-color{from{border-color: #c0c0c0;}
to{border-color: #fc4c5e;}} .g-radio, .g-checkbox{position: absolute;display: none;}
.g-radio[disabled], .g-checkbox[disabled]{cursor: not-allowed;}
.g-radio + label, .g-checkbox + label{position: relative;display: block;padding-left: 30px;cursor: pointer;vertical-align: middle;}
.g-radio + label:hover:before, .g-checkbox + label:hover:before{animation-duration: 0.4s;animation-fill-mode: both;animation-name: hover-color;}
.g-radio + label:before, .g-checkbox + label:before{position: absolute;top: 0;left: 0;display: inline-block;width: 20px;height: 20px;content: '';border: 1px solid #c0c0c0;}
.g-radio + label:after, .g-checkbox + label:after{position: absolute;display: none;content: '';}
.g-radio[disabled] + label, .g-checkbox[disabled] + label{cursor: not-allowed;color: #e4e4e4;}
.g-radio[disabled] + label:hover, .g-radio[disabled] + label:before, .g-radio[disabled] + label:after, .g-checkbox[disabled] + label:hover, .g-checkbox[disabled] + label:before, .g-checkbox[disabled] + label:after{cursor: not-allowed;}
.g-radio[disabled] + label:hover:before, .g-checkbox[disabled] + label:hover:before{border: 1px solid #e4e4e4;animation-name: none;}
.g-radio[disabled] + label:before, .g-checkbox[disabled] + label:before{border-color: #e4e4e4;}
.g-radio:checked + label:before, .g-checkbox:checked + label:before{animation-name: none;}
.g-radio:checked + label:after, .g-checkbox:checked + label:after{display: block;}
.g-radio + label:before{border-radius: 50%;}
.g-radio + label:after{top: 7px;left: 7px;width: 8px;height: 8px;border-radius: 50%;background: #fc4c5e;}
.g-radio:checked + label:before{border: 1px solid #fc4c5e;}
.g-radio:checked[disabled] + label:before{border: 1px solid #fc4c5e;}
.g-radio:checked[disabled] + label:after{background: #fcbcbd;}
.g-checkbox + label:before{border-radius: 3px;}
.g-checkbox + label:after{top: 2px;left: 7px;box-sizing: border-box;width: 6px;height: 12px;transform: rotate(45deg);border-width: 2px;border-style: solid;border-color: #fff;border-top: 0;border-left: 0;}
.g-checkbox:checked + label:before{border: #fc4c5e;background: #fc4c5e;}
.g-checkbox:checked[disabled] + label:before{border: #fcbcbd;background: #fcbcbd;}
效果如下:
PS:这个兼容到IE9+,同样是脱离了JS和图片的美化方法,使代码更简单更利于维护。
以上是关于单选框Radio和多选框checkbox美化自己测试总结的一些实用方法。当然,这样的方法网上有很多,无外乎显示隐藏图片叠加,原理大致相同,这里只是作为自己工作中的总结,也希望能给大家带来一点帮助。