div css模拟select

基础概念

div 是 HTML 中的一个通用容器元素，用于对其他 HTML 元素进行分组和布局。CSS（层叠样式表）则用于描述 HTML 或 XML 文档的样式。

模拟 select 元素通常指的是使用 div 和 CSS 来创建一个下拉选择框的效果，而不是使用原生的 select 元素。这通常是为了实现更自定义的外观和交互效果。

类型

静态模拟：使用 div 和 CSS 创建一个固定的下拉选择框，用户点击后显示选项列表。
动态模拟：使用 JavaScript 或框架（如 React、Vue）来处理下拉选择框的展开和收起逻辑。

应用场景

表单设计：在需要高度定制化表单设计的场景中，使用 div 和 CSS 模拟 select 可以更好地融入整体设计。
移动端应用：在移动端应用中，原生 select 元素可能无法满足复杂的交互需求，使用自定义的下拉选择框可以提供更好的用户体验。

示例代码

以下是一个简单的使用 div 和 CSS 模拟 select 的示例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Custom Select</title>
    <style>
        .custom-select {
            position: relative;
            display: inline-block;
            width: 200px;
        }
        .select-selected {
            background-color: #fff;
            border: 1px solid #ccc;
            padding: 8px;
            cursor: pointer;
        }
        .select-items {
            display: none;
            position: absolute;
            width: 100%;
            border: 1px solid #ccc;
            border-top: none;
            background-color: #fff;
        }
        .select-items div {
            padding: 8px;
            cursor: pointer;
        }
        .select-items div:hover {
            background-color: #f1f1f1;
        }
    </style>
</head>
<body>
    <div class="custom-select">
        <div class="select-selected">Select an option</div>
        <div class="select-items">
            <div>Option 1</div>
            <div>Option 2</div>
            <div>Option 3</div>
        </div>
    </div>

    <script>
        document.querySelector('.select-selected').addEventListener('click', function() {
            document.querySelector('.select-items').style.display = 'block';
        });

        document.querySelectorAll('.select-items div').forEach(function(item) {
            item.addEventListener('click', function() {
                document.querySelector('.select-selected').textContent = item.textContent;
                document.querySelector('.select-items').style.display = 'none';
            });
        });
    </script>
</body>
</html>