css制作下拉框效果-CSDN博客

正在做的一个页面（HTML和css写，还不会用js）有一部分需要做出来下拉框效果,查找了一下资料和网上的范例，做成了想要的效果。记录一下。

内容部分，自适应宽度，使用flex布局，三个下拉框撑开总宽度。ul在label没被checked时是隐藏的。

样式部分箭头是用：：after添在文字后面的。也可以添加其他元素，自定义即可。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Title</title>
    <style>
        body,div,ul{
            margin: 0;
            padding: 0;
        }
        input[type=checkbox]{
            display: none;
        }
        ul{
            display: none;
        }
        input[type=checkbox]:checked ~ul {
            display: block
        }
        a{
            text-decoration: none;
            color: #999;
        }
        .flex-input{
            display: flex;
            align-items: center;
        }
        .dropdown {
            position: relative;
            display: inline-block;
            font-size: 16px;
            color: #FFF;
            height: 4rem;
            flex: 1;
        }
        .dropdown label {
            box-sizing: border-box;
            display: inline-block;
            width: 100%;
            color: #999;
            font-size: 14px;
            background-color: #fff;
            line-height: 4rem;
            border-right: 1px solid #e1e5e7;
            border-bottom: 1px solid #e1e5e7;
            cursor: pointer;
            text-align: center;
            -webkit-user-select: none;
        }
        label::after {
            content: '';
            width: 0;                             // 三角形
            height: 0;                            // 三角形
            border-left: 6px solid transparent;   // 三角形
            border-right: 6px solid transparent;  // 三角形
            border-top: 10px solid #e1e5e7;       // 三角形
            position: absolute;
            right: 10px;
            top: 27px;
        }
        .dropdown ul {
            box-sizing: border-box;
            position: absolute;
            list-style: none;
            text-align: left;
            width: 100%;
            z-index: 1;
            padding: 0;
            display: none;
            border-top: none;
        }
         .dropdown ul li {            box-sizing: border-box;          复制代码

             list-style: none;            padding: 15px;
            background-color: #fff;
            cursor: pointer;
            text-align: center;
            border: 1px solid #e1e5e7;
            border-top: none;
        }      
          .dropdown ul li:hover{
            background-color: #5fc0cd;
        }
        .dropdown ul li:hover  > a{
            color: #FFF;
        }
       
    </style>
</head>

复制代码

            
<body>
    <div class="flex-input">
        <div class="dropdown">
            <input type="checkbox" id="city">
            <label for="city">所在地</label>
            <ul>
                <li><a href="#">北京</a></li>
                <li><a href="#">上海</a></li>
                <li><a href="#">深圳</a></li>
            </ul>
        </div>
        <div class="dropdown">
            <input type="checkbox" id="board">
            <label for="board">食宿</label>
            <ul>
                <li><a href="#">包吃</a></li>
                <li><a href="#">包住</a></li>
                <li><a href="#">包吃住</a></li>
            </ul>
        </div>
        <div class="dropdown">
            <input type="checkbox" id="state">
            <label for="state" style="border-right: none;">病人情况</label>
            <ul>
                <li><a href="#">一般</a></li>
                <li><a href="#">良好</a></li>
                <li><a href="#">严重</a></li>
            </ul>
        </div>
    </div>
</body>
</html>复制代码