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美化自己测试总结的一些实用方法。当然，这样的方法网上有很多，无外乎显示隐藏图片叠加，原理大致相同，这里只是作为自己工作中的总结，也希望能给大家带来一点帮助。

最后编辑于：2017.12.04 19:11:46

人面猴
序言：七十年代末，一起剥皮案震惊了整个滨河市，随后出现的几起案子，更是在滨河造成了极大的恐慌，老刑警刘岩，带你破解...
沈念sama阅读 159,117评论 4赞 362
死咒
序言：滨河连续发生了三起死亡事件，死亡现场离奇诡异，居然都是意外死亡，警方通过查阅死者的电脑和手机，发现死者居然都...
沈念sama阅读 67,328评论 1赞 293
救了他两次的神仙让他今天三更去死
文/潘晓璐我一进店门，熙熙楼的掌柜王于贵愁眉苦脸地迎上来，“玉大人，你说我怎么就摊上这事。” “怎么了？”我有些...
开封第一讲书人阅读 108,839评论 0赞 243
道士缉凶录：失踪的卖姜人
文/不坏的土叔我叫张陵，是天一观的道长。经常有香客问我，道长，这世上最难降的妖魔是什么？我笑而不...
开封第一讲书人阅读 44,007评论 0赞 206
港岛之恋（遗憾婚礼）
正文为了忘掉前任，我火速办了婚礼，结果婚礼上，老公的妹妹穿的比我还像新娘。我一直安慰自己，他们只是感情好，可当我...
茶点故事阅读 52,384评论 3赞 287
恶毒庶女顶嫁案：这布局不是一般人想出来的
文/花漫我一把揭开白布。她就那样静静地躺着，像睡着了一般。火红的嫁衣衬着肌肤如雪。梳的纹丝不乱的头发上，一...
开封第一讲书人阅读 40,629评论 1赞 219
城市分裂传说
那天，我揣着相机与录音，去河边找鬼。笑死，一个胖子当着我的面吹牛，可吹牛的内容都是我干的。我是一名探鬼主播，决...
沈念sama阅读 31,880评论 2赞 313
双鸳鸯连环套：你想象不到人心有多黑
文/苍兰香墨我猛地睁开眼，长吁一口气：“原来是场噩梦啊……” “哼！你这毒妇竟也来了？” 一声冷哼从身侧响起，我...
开封第一讲书人阅读 30,593评论 0赞 198
万荣杀人案实录
序言：老挝万荣一对情侣失踪，失踪者是张志新（化名）和其女友刘颖，没想到半个月后，有当地人在树林里发现了一具尸体，经...
沈念sama阅读 34,313评论 1赞 243
护林员之死
正文独居荒郊野岭守林人离奇死亡，尸身上长有42处带血的脓包…… 初始之章·张勋以下内容为张勋视角年9月15日...
茶点故事阅读 30,575评论 2赞 246
白月光启示录
正文我和宋清朗相恋三年，在试婚纱的时候发现自己被绿了。大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
茶点故事阅读 32,066评论 1赞 260
活死人
序言：一个原本活蹦乱跳的男人离奇死亡，死状恐怖，灵堂内的尸体忽然破棺而出，到底是诈尸还是另有隐情，我是刑警宁泽，带...
沈念sama阅读 28,392评论 2赞 253
日本核电站爆炸内幕
正文年R本政府宣布，位于F岛的核电站，受9级特大地震影响，放射性物质发生泄漏。R本人自食恶果不足惜，却给世界环境...
茶点故事阅读 33,052评论 3赞 236
男人毒药：我在死后第九天来索命
文/蒙蒙一、第九天我趴在偏房一处隐蔽的房顶上张望。院中可真热闹，春花似锦、人声如沸。这庄子的主人今日做“春日...
开封第一讲书人阅读 26,082评论 0赞 8
一桩弑父案，背后竟有这般阴谋
文/苍兰香墨我抬头看了看天上的太阳。三九已至，却和暖如春，着一层夹袄步出监牢的瞬间，已是汗流浃背。一阵脚步声响...
开封第一讲书人阅读 26,844评论 0赞 195
情欲美人皮
我被黑心中介骗来泰国打工，没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留，地道东北人。一个月前我还...
沈念sama阅读 35,662评论 2赞 274
代替公主和亲
正文我出身青楼，却偏偏与公主长得像，于是被迫代替她去往敌国和亲。传闻我的和亲对象是个残疾皇子，可洞房花烛夜当晚...
茶点故事阅读 35,575评论 2赞 270

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

方式1：用div模拟单选复选框的效果。

HTML代码

css代码：

JS代码：

效果如图：

PS :兼容大多数主流浏览器及IE6+等浏览器。

方法二：利用CSS3我们可以打造个性化表单。

HTML代码：

css代码：

效果如图：

PS :只兼容IE9及以上浏览器、chrome、火狐等主流浏览器。但因为是纯css实现的美化，不会影响到页面其他功能的实现，比较适用移动端和对兼容性要求不高的页面。

方法三：重绘

HTML代码：

css代码：

效果如下：

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

推荐阅读更多精彩内容