美文网首页
自定义select兼容ie

自定义select兼容ie

作者: nzjcnjzx | 来源:发表于2019-07-05 11:35 被阅读0次
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        .box {
            width: 300px;
            height: 300px;
            margin: 100px auto;
            border: 1px solid #ff0000;
        }

        .select-box {
            font-family: PingFangSC-Regular;
            position: relative;
            margin: 100px auto;
            width: 220px;
            height: 32px;
            line-height: 32px;
            border: 1px solid #d9d9d9;
            box-sizing: border-box;
            border-radius: 4px 4px 0 0;
            white-space: nowrap;
            color: #666;
            background: url("./images/down.png") no-repeat right center;
        }
        .text {
            position: absolute;
            left: 5px;
            top: 0;
            max-width: 200px;
            overflow: hidden;
            color: #333;
            text-overflow: ellipsis;
        }
        .select-option {
            display: none;
            position: absolute;
            left: 0;
            top: 31px;
            height: 128px;
            width: 100%;
            border: 1px solid #d9d9d9;
            border-top: none;
            overflow: hidden;
            box-sizing: border-box;
        }

        .option-box {
            position: absolute;
            top: 0;
            left: 0;
            width: 240px;
            height: 100%;
            overflow-y: auto;
            box-sizing: border-box;
        }

        .option {
            width: 100%;
            height: 32px;
            cursor: default;
        }

        .option:hover {
            background: #8FC65E;
            color: #fff;
        }
    </style>
</head>

<body>
    <h1>自定义的selelct兼容ie678</h1>
    <div class="box">
        <div class="select-box">
            <div class="text"></div>
            <div class="select-option">
                <div class="option-box">
                    <div class="option">14234234356</div>
                    <div class="option">123454366</div>
                    <div class="option">12345534536</div>
                    <div class="option">45353454</div>
                    <div class="option">1234234456</div>
                </div>
            </div>
        </div>
    </div>
</body>

</html>
<script src="./jquery.min.js"></script>
<script>
    var $box = $('.select-box');
    var $text = $('.text');
    var $selectBox = $('.select-option')
    $box.on('click', function(event) {
        $selectBox.show()
        event.stopPropagation(); 
    })
 $('.option').on('click', function() {
     $text.text($(this).text())
     setTimeout(function(){
        $selectBox.hide();
     })
 })
 $(document).on('click', function() {
     $selectBox.hide();
 })
</script>

相关文章

网友评论

      本文标题:自定义select兼容ie

      本文链接:https://www.haomeiwen.com/subject/ompshctx.html