用a标签结合有序列表实现select

最新推荐文章于 2022-07-25 23:00:01 发布

ganlubaba666

最新推荐文章于 2022-07-25 23:00:01 发布

阅读量417

点赞数

CC 4.0 BY-SA版权

分类专栏：前端基础

本文链接：https://blog.youkuaiyun.com/ganlubaba666/article/details/88920785

前端基础专栏收录该内容

21 篇文章

订阅专栏

本文介绍了一种使用HTML的a标签和有序列表(ol)来模拟实现网页中Select下拉菜单的方法，这种方法可以解决默认Select样式难以定制的问题，并提供了一个具体的实例。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

大家在使用select的时候有没有发现一个问题：固定样式很难隐藏掉，只能通过设置宽度，然后再设置overflow:hidden来隐藏固定的下拉标签
这里是一个用a标签结合有序列表来实现select

<!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>
        *{
            margin: 0;
            padding: 0;
            color: #43853d;
        }
        a{
            display: block;
            text-decoration: none;
        }
        a:hover{
            background-color: #43853d;
            color: #fff;
        }
        a:hover span{
            color:#fff; 
        }
        .select{
            width: 140px;
            position: relative;
            zoom: 1;
        }
        ol{
            width: 100%;
            border: 1px solid #43853d;
            display: none;
            position: absolute;
            list-style: none;
        }
      
        .select:hover ol{
            display: block;
            /* overflow: hidden; */
        }
        ol li a{
            padding-left: 20px;
        }
        .select:after{
            content:"";
            clear: both;
            height: 0;
            display: block;
            visibility: hidden;
        }
        
    </style>
</head>
<body>
    <h1>ssda1</h1>
    <div class="select">
        <a href="">
                "查看其它版本"
                <span>▼</span>
        </a>
        <ol>
            <li>
                <a href="">1.1</a>   
            </li>
            <li>
                <a href="">1.2</a>
            </li>
        </ol>
    </div>
</body>
</html>

在这里插入图片描述