css知识点整理-单选框Radio和多选框checkbox整形记

原始的单选框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);
效果如图:
image

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;}
效果如图:
image

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;}
效果如下:
image

PS:这个兼容到IE9+,同样是脱离了JS和图片的美化方法,使代码更简单更利于维护。

以上是关于单选框Radio和多选框checkbox美化自己测试总结的一些实用方法。当然,这样的方法网上有很多,无外乎显示隐藏图片叠加,原理大致相同,这里只是作为自己工作中的总结,也希望能给大家带来一点帮助。

推荐阅读更多精彩内容

  • Android 自定义View的各种姿势1 Activity的显示之ViewRootImpl详解 Activity...
    passiontim阅读 123,236评论 15 534
  • 想起那早准备出门时,她忽的冲我发脾气——一言不语的将气氛降至冰点且厌厌的瞪着我。彼时我十分无语她的任性,只因头...
    南九九阅读 13评论 0 0
  • 2017年,朝2016挥挥手之后,舜飞开始迈向第六个年头。 过去的一年,太多的大事件需要舜飞人去回顾和总结——舜飞...
    fsophia_jia阅读 57评论 0 0
  • 竞选结束了。 忐忑不安的心情终于也结束了。接下来就好好准备考试。 其实很开心,因为终于有一天,我可以理直气壮的说出...
    我的脑袋里有一场舞台剧阅读 34评论 0 0
  • 在没有你的城市 我走过你未曾走过的道路 我品尝你未曾品尝的美食 我领略你未曾领略的美景 在拥有你的未来 我会陪你一...
    杂鱼阅读 52评论 0 1