简单的自定义select 下拉框，兼容IE

IE浏览器下的select 实在是各种…… 不好看……，可是项目要求至少兼容IE11 ，为了长得好看些，只能手动去编辑一个类似 select 的存在了，测试过IE9 以上，有不对的欢迎指出

备忘，直接上代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        #d1{
            width:300px;
            margin: 100px auto;
            padding: 20px;
        }
        .ul{
            display: none;
            list-style: none;
            margin: -2px 0 0;
            padding: 5px 0;
            border: 1px solid #0ad0f0;
            border-top: 0;
        }
        .ul li>a{
            display: block;
            padding: 2px 5px;
            border: 1px solid transparent;
            color: #000;
            text-decoration: none;
        }
        .ul li>a:hover{
            border: 1px solid #83B7D3;
            border-radius: 3px;
            background-image: linear-gradient(#68daff, #19baf2,#68daff);
            color: #fff;
        }
        #selected{
            position: relative;
            border: 1px solid #0ad0f0;
            border-radius: 5px;
            padding: 5px 10px;
        }
        .bg1{
            position: absolute;
            top:12px;
            right:5px;
            border-width: 6px;
            border-style: solid;
            border-color: #02a2ff transparent transparent transparent;
        }
    </style>
</head>
<body>

<div id="d1">
    <div id="selected">
        <span id="content" data-id="">-请选择-</span>
        <b class="bg1"></b>
    </div>
    <ul class="ul">
        <li><a href="javascript:;" data-id="1">选项一</a></li>
        <li><a href="javascript:;" data-id="2">选项二</a></li>
        <li><a href="javascript:;" data-id="3">选项三</a></li>
        <li><a href="javascript:;" data-id="4">选项四</a></li>
        <li><a href="javascript:;" data-id="5">选项五</a></li>
    </ul>
</div>

<script src="../jquery-1.12.4.min.js"></script>
<script>
    $(document).ready(function(){
        $("#selected").click(function(){
            $(".ul").toggle();
        });
    });

    $(".ul li>a").click(function () {
        $("#content").html($(this).html())
                     .attr("data-id",$(this).attr("data-id"));

        $(".ul").css("display","none");
    })
</script>
</body>
</html>

效果图：
这里写图片描述

简单的自定义select 下拉框，兼容IE

猜你喜欢