HTML ui模仿select

最新推荐文章于 2024-04-24 09:27:42 发布

深色風信子

最新推荐文章于 2024-04-24 09:27:42 发布

阅读量285

点赞数 1

分类专栏： Web前端文章标签： html css javascript css3 jquery

本文链接：https://blog.csdn.net/qq_34814092/article/details/107305488

版权

Web前端专栏收录该内容

4 篇文章 0 订阅

订阅专栏

HTML ui模仿select

1 HTML
2 CSS3
3 JavaScript
4 效果

1 HTML

<!DOCTYPE html>
<html>

<head>
    <title>ul模拟select</title>
    <script type="text/javascript" src="./jquery/jquery-3.5.1.js"></script>
    <link rel="stylesheet" href="./css/demo.css">
</head>

<body>

    <div class="select-style-box">
        <input type="text" value="请选择..." readonly="readonly">
        <ul class="select_ul">
            <li>选项一</li>
            <li>选项二</li>
            <li>选项三</li>
            <li>选项四</li>
            <li>选项五</li>
            <li>选项六</li>
            <li>选项七</li>
            <li>选项八</li>
            <li>选项九</li>
        </ul>
    </div>
    
</body>

<script type="text/javascript" src="./demo.js"></script>

</html>

2 CSS3

.select-style-box {
    padding: 0;
    width: 300px;
    margin: 10px;
    font-size: 12px;
    position: relative;
}

.select-style-box input {
    width: 100%;
    height: 25px;
    display: block;
    cursor: pointer;
    line-height: 25px;
    overflow: hidden;
    padding-left: 10px;
    padding-right: 20px;
    border: 1px solid #ccc;
}

.select-style-box ul {
    left: 0px;
    top: 28px;
    margin: 0px;
    padding: 0px;
    display: none;
    width: 330px;
    z-index: 99999;
    overflow: hidden;
    position: absolute;
    background: #fff;
    background: #ebebeb;
    list-style-type: none;
    border: 1px solid #ccc;
}

.select-style-box ul li {
    width: 100%;
    margin: 0px;
    padding: 0px;
    height: 30px;
    display: block;
    cursor: pointer;
    overflow: hidden;
    line-height: 30px;
    padding-left: 5px;
    list-style-type: none;
}

.hover {
    background: #ccc;
}

3 JavaScript

$(document).ready(function() { 
    $(".select-style-box input").click(function() {  
        var input = $(this);  
        var ul = $(this).parent().find("ul");  
        if (ul.css("display") == "none") {   
            if (ul.height() > 200) {
                ul.css({ height: "200" + "px", "overflow-y": "scroll" });
            };   
            ul.show();
            ul.hover(function() {}, function() {
                ul.hide();
            });
            ul.find("li").click(function() {
                input.val($(this).text());
                ul.hide();
            }).hover(function() {
                $(this).addClass("hover");
            }, function() {
                $(this).removeClass("hover");
            });   
        } else {   
            ul.hide();   
        } 
    });
});

4 效果

在这里插入图片描述

深色風信子

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
HTML ui模仿select

HTML ui模仿select1 HTML2 CSS33 JavaScript4 效果1 HTML<!DOCTYPE html><html><head> <title>ul模拟select</title> <script type="text/javascript" src="./jquery/jquery-3.5.1.js"></script> <link rel="styleshe
复制链接

扫一扫