css知識點(diǎn)整理-單選框Radio和多選框checkbox整形記

原始的單選框Radio和多選框checkbox樣式百年不變已經(jīng)滿足不了我們客戶的審美了二汛。表單很多控件需要美化婿崭，我們經(jīng)常借助Javascript來美化它，也有直接用CSS來美化肴颊，更多的是直接拿插件來改變它的外貌氓栈，畢竟大牛橫行的時(shí)代封裝的插件顯得更加高效便捷，但是也有像編編這樣不甘于插件式的一站服務(wù)婿着，選擇更加便捷輕巧的css來解決不是大問題的棘手問題授瘦。今天給大家整理的也是工作中使用并總結(jié)出來的純CSS或者簡單的js實(shí)現(xiàn)radio和checkbox的美化的方法，希望能更便捷的幫助到大家的日常工作竟宋。

方式1：用div模擬單選復(fù)選框的效果提完。

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>未選中且不可點(diǎn)擊狀態(tài)</span></div>
    <div class="checkbox" name="sport" value="sported">
        <ins class="enable"></ins>
        <span>選中且不可點(diǎn)擊狀態(tài)</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>未選中且不可點(diǎn)擊狀態(tài)</span></div>
    <div class="radio" name="sex" value="sexed">
        <ins class="enable"></ins>
        <span>選中且不可點(diǎn)擊狀態(tài)</span></div>
</div>
css代碼：

用css的transtion為移入及選中添加動態(tài)效果。

transition-property 規(guī)定過渡屬性名稱丘侠。

transition-duration 定義過渡效果花費(fèi)時(shí)間徒欣，默認(rèn)是 0。

transition-timing-function 規(guī)定過渡時(shí)間曲線蜗字，默認(rèn)是 "ease"打肝。

transition-delay 規(guī)定過渡開始事件，默認(rèn)是 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代碼：

包含點(diǎn)擊事件和移入事件

(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 :兼容大多數(shù)主流瀏覽器及IE6+等瀏覽器粗梭。

方法二：利用CSS3我們可以打造個(gè)性化表單。

CSS3美化checkbox和Radiobox的原理很簡單级零，在頁面上新建一個(gè)checkbox和radiobox并給予他們默認(rèn)的label標(biāo)簽顯示文字断医，然后將checkbox和radiobox隱藏，再利用CSS3來美化label標(biāo)簽妄讯，這樣孩锡，我們就自定義了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實(shí)現(xiàn)框體的美化躬窜，label的for屬性指向?qū)?yīng)的id實(shí)現(xiàn)事件的綁定。

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荣挨、火狐等主流瀏覽器男韧。但因?yàn)槭羌僣ss實(shí)現(xiàn)的美化，不會影響到頁面其他功能的實(shí)現(xiàn)默垄，比較適用移動端和對兼容性要求不高的頁面此虑。

方法三：重繪

CSS將checkbox和radio隱藏，然后使用:before和:after定位重繪checkbox和radio外觀口锭，從而達(dá)到美化效果朦前，支持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">備選狀態(tài)</label>
            </div>
            <div class="opt">
                <input class="g-checkbox" type="checkbox" name="layout" id="c2" checked>
                <label for="c2">選中狀態(tài)</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">備選狀態(tài)</label>
            </div>
            <div class="opt">
                <input class="g-radio" type="radio" name="radio" id="r2" value="option2" checked>
                <label for="r2">選中狀態(tài)</label>
            </div>
            <div class="opt">
                <input class="g-radio" type="radio" name="radio" id="r3" value="option3" disabled>
                <label for="r3" style="color:#ccc">禁用狀態(tài)</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：這個(gè)兼容到IE9+鹃操，同樣是脫離了JS和圖片的美化方法韭寸，使代碼更簡單更利于維護(hù)。

以上是關(guān)于單選框Radio和多選框checkbox美化自己測試總結(jié)的一些實(shí)用方法荆隘。當(dāng)然恩伺，這樣的方法網(wǎng)上有很多，無外乎顯示隱藏圖片疊加椰拒，原理大致相同晶渠，這里只是作為自己工作中的總結(jié)，也希望能給大家?guī)硪稽c(diǎn)幫助燃观。

最后編輯于 ：
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
  • 人面猴
    序言：七十年代末褒脯，一起剝皮案震驚了整個(gè)濱河市，隨后出現(xiàn)的幾起案子仪壮，更是在濱河造成了極大的恐慌憨颠，老刑警劉巖，帶你破解...
    沈念sama閱讀 206,311評論 6贊 481
  • 死咒
    序言：濱河連續(xù)發(fā)生了三起死亡事件积锅，死亡現(xiàn)場離奇詭異爽彤，居然都是意外死亡，警方通過查閱死者的電腦和手機(jī)缚陷，發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 88,339評論 2贊 382
  • 救了他兩次的神仙讓他今天三更去死
    文/潘曉璐 我一進(jìn)店門适篙，熙熙樓的掌柜王于貴愁眉苦臉地迎上來，“玉大人箫爷，你說我怎么就攤上這事嚷节。” “怎么了虎锚？”我有些...
    開封第一講書人閱讀 152,671評論 0贊 342
  • 道士緝兇錄：失蹤的賣姜人
    文/不壞的土叔 我叫張陵硫痰，是天一觀的道長。 經(jīng)常有香客問我窜护，道長效斑，這世上最難降的妖魔是什么？ 我笑而不...
    開封第一講書人閱讀 55,252評論 1贊 279
  • ?港島之戀（遺憾婚禮）
    正文 為了忘掉前任柱徙，我火速辦了婚禮缓屠，結(jié)果婚禮上奇昙，老公的妹妹穿的比我還像新娘。我一直安慰自己敌完，他們只是感情好储耐，可當(dāng)我...
    茶點(diǎn)故事閱讀 64,253評論 5贊 371
  • 惡毒庶女頂嫁案：這布局不是一般人想出來的
    文/花漫 我一把揭開白布。 她就那樣靜靜地躺著滨溉，像睡著了一般什湘。 火紅的嫁衣襯著肌膚如雪。 梳的紋絲不亂的頭發(fā)上晦攒，一...
    開封第一講書人閱讀 49,031評論 1贊 285
  • 城市分裂傳說
    那天禽炬，我揣著相機(jī)與錄音，去河邊找鬼勤家。 笑死，一個(gè)胖子當(dāng)著我的面吹牛柳恐，可吹牛的內(nèi)容都是我干的伐脖。 我是一名探鬼主播，決...
    沈念sama閱讀 38,340評論 3贊 399
  • 雙鴛鴦連環(huán)套：你想象不到人心有多黑
    文/蒼蘭香墨 我猛地睜開眼乐设，長吁一口氣：“原來是場噩夢啊……” “哼讼庇！你這毒婦竟也來了？” 一聲冷哼從身側(cè)響起近尚，我...
    開封第一講書人閱讀 36,973評論 0贊 259
  • 萬榮殺人案實(shí)錄
    序言：老撾萬榮一對情侶失蹤蠕啄，失蹤者是張志新（化名）和其女友劉穎，沒想到半個(gè)月后戈锻，有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體歼跟，經(jīng)...
    沈念sama閱讀 43,466評論 1贊 300
  • ?護(hù)林員之死
    正文 獨(dú)居荒郊野嶺守林人離奇死亡，尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點(diǎn)故事閱讀 35,937評論 2贊 323
  • ?白月光啟示錄
    正文 我和宋清朗相戀三年格遭，在試婚紗的時(shí)候發(fā)現(xiàn)自己被綠了哈街。 大學(xué)時(shí)的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片。...
    茶點(diǎn)故事閱讀 38,039評論 1贊 333
  • 活死人
    序言：一個(gè)原本活蹦亂跳的男人離奇死亡拒迅，死狀恐怖骚秦，靈堂內(nèi)的尸體忽然破棺而出，到底是詐尸還是另有隱情璧微，我是刑警寧澤作箍，帶...
    沈念sama閱讀 33,701評論 4贊 323
  • ?日本核電站爆炸內(nèi)幕
    正文 年R本政府宣布，位于F島的核電站前硫，受9級特大地震影響胞得，放射性物質(zhì)發(fā)生泄漏。R本人自食惡果不足惜开瞭，卻給世界環(huán)境...
    茶點(diǎn)故事閱讀 39,254評論 3贊 307
  • 男人毒藥：我在死后第九天來索命
    文/蒙蒙 一懒震、第九天 我趴在偏房一處隱蔽的房頂上張望罩息。 院中可真熱鬧，春花似錦个扰、人聲如沸瓷炮。這莊子的主人今日做“春日...
    開封第一講書人閱讀 30,259評論 0贊 19
  • 一樁弒父案递宅，背后竟有這般陰謀
    文/蒼蘭香墨 我抬頭看了看天上的太陽娘香。三九已至，卻和暖如春办龄，著一層夾襖步出監(jiān)牢的瞬間烘绽，已是汗流浹背。 一陣腳步聲響...
    開封第一講書人閱讀 31,485評論 1贊 262
  • 情欲美人皮
    我被黑心中介騙來泰國打工俐填， 沒想到剛下飛機(jī)就差點(diǎn)兒被人妖公主榨干…… 1. 我叫王不留安接，地道東北人。 一個(gè)月前我還...
    沈念sama閱讀 45,497評論 2贊 354
  • 代替公主和親
    正文 我出身青樓英融，卻偏偏與公主長得像盏檐，于是被迫代替她去往敵國和親。 傳聞我的和親對象是個(gè)殘疾皇子驶悟，可洞房花燭夜當(dāng)晚...
    茶點(diǎn)故事閱讀 42,786評論 2贊 345

推薦閱讀更多精彩內(nèi)容

  • Android 自定義View的各種姿勢1 Activity的顯示之ViewRootImpl詳解 Activity...
    passiontim閱讀 171,506評論 25贊 707
  • 發(fā)現(xiàn) 關(guān)注 消息 iOS 第三方庫胡野、插件、知名博客總結(jié) 作者大灰狼的小綿羊哥哥關(guān)注 2017.06.26 09:4...
    肇東周閱讀 12,024評論 4贊 62
  • 想起那早準(zhǔn)備出門時(shí)痕鳍，她忽的沖我發(fā)脾氣——一言不語的將氣氛降至冰點(diǎn)且厭厭的瞪著我硫豆。彼時(shí)我十分無語她的任性，只因頭...
    南九九閱讀 233評論 0贊 0
  • 2017年，朝2016揮揮手之后诗赌，舜飛開始邁向第六個(gè)年頭耘眨。 過去的一年，太多的大事件需要舜飛人去回顧和總結(jié)——舜飛...
    fsophia_jia閱讀 185評論 0贊 0
  • 競選結(jié)束了剔难。 忐忑不安的心情終于也結(jié)束了。接下來就好好準(zhǔn)備考試奥喻。 其實(shí)很開心偶宫，因?yàn)榻K于有一天，我可以理直氣壯的說出...
    我的腦袋里有一場舞臺劇閱讀 217評論 0贊 0