自定义select下拉框，解决select下拉框在IE上的样式异常

最新推荐文章于 2023-10-25 16:01:32 发布

xieqian0204

最新推荐文章于 2023-10-25 16:01:32 发布

阅读量1.2k

点赞数 1

文章标签： IE兼容

本文链接：https://blog.csdn.net/xieqian0204/article/details/102956450

版权

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title></title>
    <link rel="stylesheet" href="content/font/iconfont.css">
    <style type="text/css">
        /*css*/
        /*通用样式*/
        body{
            /*background: #FFBD1E;*/
        }
        ul,li{
            list-style: none;
            padding: 0;
            margin: 0;
        }
        /*下拉框样式*/
        #select{
            margin:100px;
            background: rgba(0,0,0,0);
            width: 249px;
            height: 40px;
            font-family: "微软雅黑";
            color: #666;
            border: 1px #ccc solid;
            border-radius: 5px;
            box-shadow: 0 0 5px #ccc;
        }
        .select-head{
            overflow: hidden;
            width: 249px;
            height: 40px;
            box-sizing: border-box;
            padding: 0 10px;
            line-height: 40px;
        }
        .select-head .select-head-cont{
            float: left;
        }
        .select-head .select-icon{
            float: right;
            font-size: 14px;
        }
        .option{
            text-indent: 10px;
            margin-top: 1px;
            width: 249px;
            color: #666666;
            background: rgba(230,200,200,0.1);
            line-height: 35px;
            border: 1px #cfcfcf solid;
            display: none;
            box-shadow: 0 0 5px #ccc;
            font-size: 14px;
        }
        .option-item:hover{
            background: rgba(230,200,200,0.4);
            cursor: pointer;
        }
    </style>
</head>
<body>
<!--html-->
<ul id="select">
    <li>
        <div class="select-head">
            <span class="select-head-cont"></span>
            <span class="iconfont icon-xiala select-icon"></span>
        </div>
        <ul class="option">
            <li class="option-item">宋体</li>
            <li class="option-item">微软雅黑</li>
            <li class="option-item">黑体</li>
            <li class="option-item">方正</li>
        </ul>

    </li>
</ul>
<script type="text/javascript">
    //int
    var selectHead = document.getElementsByClassName('select-head')[0];
    var selectHeadCont = document.getElementsByClassName('select-head-cont');
    var Option = document.getElementsByClassName('option')[0];
    var optionItem = document.getElementsByClassName('option-item');

    /*默认是第一个选项*/
    selectHeadCont[0].innerHTML = optionItem[0].innerHTML;

    /*点击后出现下拉框*/
    selectHead.addEventListener('click',function(e){
        e.stopPropagation();
        Option.style.display = 'block';
    },false);
    /*点击选项后出现在下拉框*/
    var len = optionItem.length;
    for(var i=0;i<len;i++){
        optionItem[i].index = i;
        optionItem[i].addEventListener('click',function(){
            selectHeadCont[0].innerHTML = optionItem[this.index].innerHTML;
            Option.style.display = 'none';
        },false);
    }
    // /*点击其他地方时，select会收起来*/
    document.body.addEventListener('click',function(){
        Option.style.display = 'none';
    },false);
</script>
</body>
</html>

xieqian0204

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
自定义select下拉框，解决select下拉框在IE上的样式异常

<!DOCTYPE html><html><head> <meta charset="UTF-8"> <title></title> <link rel="stylesheet" href="content/font/iconfont.css"> <style type=...
复制链接

扫一扫