模拟select样式+功能，兼容IE9+

最新推荐文章于 2021-08-03 14:52:58 发布

辣姐什么鬼

最新推荐文章于 2021-08-03 14:52:58 发布

阅读量760

点赞数

分类专栏： web前端

本文链接：https://blog.csdn.net/liona_koukou/article/details/79635213

版权

web前端专栏收录该内容

174 篇文章 6 订阅

订阅专栏

效果：

代码：用了rem作单位，jquery.js

<!doctype html>
<html>
<meta charset="utf-8">
<title>div模拟select</title>
<script>
    function fontAuto(){
        document.documentElement.style.fontSize = document.documentElement.clientWidth/19.2 + 'px';
    }
    fontAuto();
    window.onresize=function () {
        fontAuto();
    }
</script>
<style type="text/css">
    html,body{
        width:100%;
        height:100%;
        background:#0e3a81;
    }
    .input-select {
        position: relative;
        display: inline-block;
    }
    .input-select input {
        border-radius: 0;
        color: #00a0e9;
        height: 0.3rem;
        line-height: 0.3rem;
        border:1px solid rgba(96, 207, 240, 0.7);
        background: none;
        width: 1.5rem;
        display: block;
        font-size: 0.12rem;
        position:relative;
        z-index:1;
        text-indent:0.1rem;
    }
    .input-select .dropdown {
        position: absolute;
        top: 0.32rem;
        left: 0px;
        width: 1.52rem;
        padding: 0;
        background: rgba(18,18,30,0.79);
        border: none;
        z-index: 999;
        margin:0;
        display:none;
    }

    .input-select .dropdown li {
        height:0.24rem;
        line-height:0.24rem;
        font-size:0.12rem;
        display: block;
        cursor: pointer;
        padding-left: 0.05rem;
        border-top: 1px solid rgba(18,18,30,0.79);
        border-bottom: 1px solid rgba(18,18,30,0.79);
        color: #00a0e9;
    }

    .input-select .dropdown li:hover {
        border-top: 1px solid #00ffff;
        border-bottom: 1px solid #00ffff;
        background: rgba(18,18,30,0.6);
    }
</style>
<body>
<div class="input-select">
    <input type="text" data-val="全部" class="input" value="郑爽" />
    <ul class="dropdown">
        <li>郑爽-沈晨曦</li>
        <li>郑爽-木子</li>
        <li>郑爽-易遥</li>
    </ul>
</div>
<script type="text/javascript" src="js/jquery.min.js"></script>
<script>
    var isBox = false; // 定义一个触发焦点事件的开关，默认为不开启状态 || 也可以给input设置一个属性，来判断
    $(".input").focus(function () { // input绑定焦点事件，触发时打开焦点开关
        $(".dropdown").hide();
        $(this).siblings(".dropdown").show();
        isBox = true;
    });
    $(".input-select").mousemove(function () { // 鼠标进入input-box区域内打开焦点开关
        isBox = true;
    });
    $(".input-select").mouseout(function () { // 鼠标离开input-box区域内关闭焦点开关
        isBox = false;
    });
    $(".input").blur(function () { // input失去焦点时通过焦点开关状态判断鼠标所在区域
        if (isBox == true) return false;
        $(this).siblings(".dropdown").hide();
    });
    $(".dropdown").find('li').each(function () { // 传值给input，同时关闭焦点开关
        $(this).on("click", function () {
            isBox = false;
            var text = $(this).text();
            $(this).parent().siblings(".input").val(text);
            $(this).parents(".dropdown").hide();
        })
    })
</script>
</body>
</html>

辣姐什么鬼

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
打赏
0
评论
模拟select样式+功能，兼容IE9+

效果：代码：用了rem作单位，jquery.js &lt;!doctype html&gt;&lt;html&gt;&lt;meta charset="utf-8"&gt;&lt;title&gt;div模拟select&lt;/title&gt;&lt;script&gt; function fontAuto(){ document.docu
复制链接

扫一扫