select随笔

 

select 美化

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script>
</head>
<style>
    body,ul{
        margin:0;
        padding: 0;
        background: #1D9669;
    }
    .content{
        padding-top:5%;
    }
    .content .select-wrap{
        width:300px;
        height:40px;
        font-size: 16px;
        margin: 0 auto;
        background: #fff;
        position: relative;
    }
    .content .select-wrap:after{
        content: '';
        display: block;
        width: 10px;
        height: 10px;
        border-left:1px #000 solid;
        border-bottom:1px #000 solid;
        transform: rotate(-45deg);
        position: absolute;
        top:11px;
        right: 12px;
    }
    .content .select-wrap .title{
        padding: 0 15px;
        line-height:40px;
        cursor: pointer;
    }
    .content .select-wrap ul{
        list-style-type: none;
        background-color: #fff;
        width: 100%;
        overflow-y: auto;
        top:40px;
        position: absolute;
        left:0;
        max-height: 0;
    }
    .content .select-wrap ul li{
        padding: 0 15px;
        line-height:40px;
        cursor: pointer;
    }
    .content .select-wrap ul li:hover{
        background-color: #e0e0e0;
    }
    .content .select-wrap .selected{
        background: #39f;
        color: #fff;
    }
    .content .open ul{
        max-height: 250px;
    }
    .content .open:after{
        transform: rotate(-225deg);
        top:18px;
        transition: all .3s ease-in;
    }
</style>
<script>
    $(function () {
        $(".select-wrap").on("click",function () {
            $(this).toggleClass("open");
        });

        var liItem = $(".select-wrap ul li");
        liItem.on("click",function () {
            var $this = $(this);
            liItem.removeClass("selected");
            $this.addClass("selected");
            $(".title").text($this.text());
            $(".selected").text($this.text()).attr("data-value",$this.attr("data-value"));
        })
    })
</script>
<body>
    <div class="content">
        <div class="select-wrap">
            <p class="title">请选择</p>
            <ul>
                <li data-value="HTML">HTML</li>
                <li data-value="CSS">CSS</li>
                <li data-value="JS">JS</li>
                <li data-value="PHP">PHP</li>
            </ul>
        </div>
    </div>

</body>
</html>

　　

　　

      

 

posted @ 2017-09-20 14:45  南侠书生  阅读(149)  评论(0)    收藏  举报