单选框，复选框，下拉列表的美化

野性酷女 2022-09-25 14:21 346阅读 0赞

## 参考：[http://www.jq22.com/yanshi9351][http_www.jq22.com_yanshi9351] ##

![这里写图片描述][20160911223641621]  
![这里写图片描述][20160911223653949]  
![这里写图片描述][20160911223823606]

<!DOCTYPE html>
    <html>
    
        <head>
            <meta charset="UTF-8">
            <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
            <title></title>
            <style type="text/css">
                body {
                    margin: 0;
                    font: 16px/20px "宋体";
                }
    
                .box1 {
                    width: 500px;
                    height: 100px;
                    line-height: 100px;
                    margin: 0 auto;
                    border: 1px solid red;
                    text-align: center;
                }
    
                .box1 label {
                    position: relative;
                    padding-left: 20px;
    
                }
    
                .box1 input {
                    visibility: hidden;
                }
    
                .box1 i {
                    position: absolute;
                    top: -2px;
                    left: -2px;
                    height: 19px;
                    width: 19px;
                    background: url('http://sandbox.runjs.cn/uploads/rs/26/ddzmgynp/radiobutton.gif') no-repeat -14px -18px;
                }
    
                .box1 label:hover {
                    color: red;
                }
    
                .box1 label:hover i {
                    background-position: -14px -118px;
                }
    
                .box1 label.selected1 i {
                    background-position: -14px -218px;
                }
            </style>
            <style type="text/css">
                .box2 {
                    width: 600px;
                    height: 100px;
                    line-height: 100px;
                    margin: 0 auto;
                    border: 1px solid black;
                    text-align: center;
                }
    
                .box2 label {
                    position: relative;
                    padding-left: 20px;
                }
    
                .box2 input {
                    visibility: hidden;
                }
    
                .box2 i {
                    position: absolute;
                    top: -2px;
                    left: -2px;
                    height: 19px;
                    width: 19px;
                    background: url('http://sandbox.runjs.cn/uploads/rs/26/ddzmgynp/checkbox.gif') no-repeat -14px -18px;
                }
    
                .box2 label:hover {
                    color: red;
                }
    
                .box2 label:hover i {
                    background-position: -14px -118px;
                }
    
                .box2 label.selected2 i {
                    background-position: -14px -218px;
                }
            </style>
        </head>
    
        <body>
            <div class="box1" id="box1">
                单选一项游戏方式：
                <label for="xiu"><i></i>咻一咻</label>
                <input id="xiu" type="radio" value="咻一咻">
                <label for="yao"><i></i>摇一摇</label>
                <input id="yao" type="radio" value="摇一摇">
                <label for="niu"><i></i>扭一扭</label>
                <input id="niu" type="radio" value="扭一扭">
            </div>
            <script>
                var oBox1 = document.getElementById('box1');
                var aLabel1 = oBox1.getElementsByTagName('label');
                for(var i = 0, leni = aLabel1.length; i < leni; i++) {
                    aLabel1[i].onclick = function() {
         
                        for(var j = 0, lenj = aLabel1.length; j < lenj; j++) {
                            aLabel1[j].removeAttribute('class');
                        }
                        this.className = 'selected1';
                    }
                }
            </script>
            <div class="box2" id="box2">
                多选日常手机交易方式(可多选)：
                <label for="a"><i></i>支付宝</label>
                <input id="a" type="radio" value="支付宝">
                <label for="t"><i></i>微信</label>
                <input id="t" type="radio" value="微信">
                <label for="b"><i></i>百度钱包</label>
                <input id="b" type="radio" value="百度钱包">
            </div>
            <script>
                var oBox2 = document.getElementById('box2');
                var aLabel2 = oBox2.getElementsByTagName('label');
                for(var i = 0, leni = aLabel2.length; i < leni; i++) {
                    aLabel2[i].onclick = function() {
         
                        if(!this.className) {
                            this.className = 'selected2';
                        } else {
                            this.removeAttribute('class');
                        }
                    }
                }
            </script>
        </body>
    
    </html>

![这里写图片描述][20160911225355877]\`

<!doctype html>
    
    <html lang="zh">
    
        <head>
            <title>单选按钮和复选框的美化（只用css）</title>
            <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
            <meta charset="UTF-8" />
            <style>
                /*CSS源代码*/
    
                body {
                    font: menu;
                    font-size: 16px;
                }
    
                .con {
                    width: 1000px;
                    margin: 0 auto;
                }
    
                .con h1 {
                    text-align: center;
                }
    
                h1,
                h2 {
                    font-weight: normal;
                    color: #0CC;
                }
    
                ul {
                    margin: 0;
                    padding: 0;
                    list-style: none;
                }
    
                em {
                    font-style: normal;
                }
                /*复选*/
    
                .check_box {
                    display: inline-block;
                    position: relative;
                }
    
                .check_box label {
                    width: 16px;
                    height: 16px;
                    position: absolute;
                    top: 0;
                    left: 0;
                    border: 2px solid #cacaca;
                    border-radius: 50%;
                    background: #fff;
                    cursor: pointer;
                }
    
                .check_box label:hover {
                    border: 2px solid #f78642;
                }
    
                .check_box label:after {
                    content: '';
                    width: 8px;
                    height: 4px;
                    position: absolute;
                    top: 4px;
                    left: 3px;
                    border: 2px solid #cacaca;
                    border-top: none;
                    border-right: none;
                    opacity: 0.4;
                    transform: rotate(-45deg);
                    /*-webkit-transform:rotate(-45deg);*/
                }
    
                .check_box label:hover:after {
                    border: 2px solid #f78642;
                    border-top: none;
                    border-right: none;
                }
    
                .check_box input:checked+ label {
                    border: 2px solid #f78642;
                }
    
                .check_box input:checked+ label:after {
                    opacity: 1;
                    border: 2px solid #f78642;
                    border-top: none;
                    border-right: none;
                }
    
                .check_box em {
                    margin: 0 0 0 5px;
                }
                /*单选*/
    
                .radio_box {
                    display: inline-block;
                    position: relative;
                }
    
                .radio_box label {
                    width: 15px;
                    height: 15px;
                    position: absolute;
                    top: 0;
                    left: 0;
                    border: 2px solid #ef4949;
                    border-radius: 50%;
                    background: #fff;
                    cursor: pointer;
                }
    
                .radio_box input:checked+ label:after {
                    content: '';
                    width: 9px;
                    height: 9px;
                    position: absolute;
                    top: 3px;
                    left: 3px;
                    background: #ef4949;
                    border-radius: 50%;
                }
    
                .check_box em {
                    margin: 0 0 0 5px;
                }
            </style>
    
        </head>
    
        <body>
    
            <div class="con">
                <h1>单选框复选框的美化</h1>
                <h2>复选框:</h2>
                <span class="check_box">
                    <input type="checkbox" id="check_1">
                    <label for="check_1"></label>
                    <em>选项1</em>
               </span>
                <br><br>
                <span class="check_box">
                    <input type="checkbox" id="check_2">
                    <label for="check_2"></label>
                    <em>选项2</em>
               </span>
                <br><br>
                <span class="check_box">
                    <input type="checkbox" id="check_3">
                    <label for="check_3"></label>
                    <em>选项3</em>
               </span>
                <br><br>
                <h2>单选框:</h2>
                <span class="radio_box">
                    <input type="radio" id="radio_1" name="radio" checked>
                    <label for="radio_1"></label>
                    <em>选项1</em>
               </span>
                <br><br>
                <span class="radio_box">
                    <input type="radio" id="radio_2" name="radio">
                    <label for="radio_2"></label>
                    <em>选项2</em>
               </span>
            </div>
    
        </body>
    
    </html>

![这里写图片描述][20160912092446923]

<html>
    
        <head>
            <meta charset="utf-8" />
            <style type="text/css">
                div,
                ul,
                li {
                    margin: 0;
                    padding: 0;
                }
    
                ul {
                    line-style: none;
                }
    
                .select {
                    position: relative;
                    width: 134px;
                    min-width: 134px;
                    height: 36px;
                    border: 1px solid #eee;
                    cursor: pointer;
                }
    
                .select:after {
                    content: "";
                    position: absolute;
                    top: 50%;
                    right: 10px;
                    margin-top: -2px;
                    border-top: 5px solid #666;
                    border-right: 5px solid transparent;
                    border-left: 5px solid transparent;
                }
    
                .select .select_text {
                    padding: 0 20px 0 10px;
                    height: 36px;
                    line-height: 36px;
                }
    
                .select_ul {
                    display: none;
                    position: absolute;
                    top: 34px;
                    left: -1px;
                    width: 134px;
                    min-width: 134px;
                    border: 1px solid #D4D4D4;
                    border-bottom-right-radius: 3px;
                    border-bottom-left-radius: 3px;
                    background: #fff;
                }
    
                .select_ul li {
                    line-height: 36px;
                    text-indent: 10px;
                }
    
                .select_ul li:hover {
                    color: #fff;
                    background: #6AA7EA;
                }
    
                .select_ul li.cur {
                    color: #fff;
                    background: #195DA3;
                }
            </style>
            <script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
            <script type="text/javascript">
                ;
                (function($) {
         
                    //默认参数
                    var defaluts = {
                        select: "select",
                        select_text: "select_text",
                        select_ul: "select_ul"
                    };
                    $.fn.extend({
                        "select": function(options) {
         
                            var opts = $.extend({}, defaluts, options);
                            return this.each(function() {
         
                                var $this = $(this);
                                //模拟下拉列表
                                if($this.data("value") !== undefined && $this.data("value") !== '') {
                                    $this.val($this.data("value"));
                                }
                                var _html = [];
                                _html.push("<div class=\"" + $this.attr('class') + "\">");
                                _html.push("<div class=\"" + opts.select_text + "\">" + $this.find(":selected").text() + "</div>");
                                _html.push("<ul class=\"" + opts.select_ul + "\">");
                                $this.children("option").each(function() {
         
                                    var option = $(this);
                                    if($this.data("value") == option.val()) {
                                        _html.push("<li class=\"cur\" data-value=\"" + option.val() + "\">" + option.text() + "</li>");
                                    } else {
                                        _html.push("<li data-value=\"" + option.val() + "\">" + option.text() + "</li>");
                                    }
                                });
                                _html.push("</ul>");
                                _html.push("</div>");
                                var select = $(_html.join(""));
                                var select_text = select.find("." + opts.select_text);
                                var select_ul = select.find("." + opts.select_ul);
                                $this.after(select);
                                $this.hide();
                                //下拉列表操作
                                select.click(function(event) {
         
                                    $(this).find("." + opts.select_ul).slideToggle().end().siblings("div." + opts.select).find("." + opts.select_ul).slideUp();
                                    event.stopPropagation();
                                });
                                $("body").click(function() {
         
                                    select_ul.slideUp();
                                });
                                select_ul.on("click", "li", function() {
         
                                    var li = $(this);
                                    var val = li.addClass("cur").siblings("li").removeClass("cur").end().data("value").toString();
                                    if(val !== $this.val()) {
                                        select_text.text(li.text());
                                        $this.val(val);
                                        $this.attr("data-value", val);
                                    }
                                });
                            });
                        }
                    });
                })(jQuery);
            </script>
        </head>
    
        <body>
            <select class="select" name="state" data-value="0">
                <option value="0">请选择</option>
                <option value="1">广州市</option>
                <option value="2">深圳市</option>
                <option value="3">湛江市</option>
                <option value="4">北京市</option>
            </select>
    
            <script type="text/javascript">
                $(function() {
         
                    $('select.select').select();
                });
            </script>
        </body>
    
    </html>

[http_www.jq22.com_yanshi9351]: http://www.jq22.com/yanshi9351
[20160911223641621]: /images/20220717/9cb366c3d7254b90b8bdc7c3723436ef.png
[20160911223653949]: /images/20220717/7739c5e243dd4eb98ec564f47b1c2d5e.png
[20160911223823606]: /images/20220717/cef8b1d36469472eb7579fd0c20d8435.png
[20160911225355877]: /images/20220717/dcdd6aa9207544238111a064a52bd85d.png
[20160912092446923]: /images/20220717/74a736aab9354809a13755a221057a1f.png