Custom Select Menu using HTML, CSS and javaScript

HTML

CSS

Output

HTML Copied

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link
        href="https://fonts.googleapis.com/css2?family=Fira+Sans:wght@400;500;600;700;800;900&family=Poppins:wght@400;500;600;700;800;900&display=swap"
        rel="stylesheet">
    <title>Custom Select Menu using HTML, CSS and javaScript</title>
    
</head>

<body>
    <div class="main-div">
        <h2 class="heading-para">Custom Select Menu using HTML, CSS and javaScript</h2>

<label>Job Title</label>
        <div class="select-menu">
            <div class="select-btn">
                <input type="text" class="sBtn-text" value="" placeholder="Select Job Title" readonly>
                <i><img src="https://www.teknowize.com/attachments/file_1688847017.svg" alt="Chevron"></i>
            </div>
            <ul class="options">
                <li class="option">
                    <span class="option-text">Web Designer</span>
                </li>
                <li class="option">
                    <span class="option-text">Web Developer</span>
                </li>
            </ul>
        </div>
    </div>
    
</body>

</html>

CSS Copied

* {
            box-sizing: border-box;
            font-family: 'Fira Sans', sans-serif;
        }

body {
            display: grid;
            place-items: center;
            min-height: 100vh;
        }

.main-div {
            width: 100%;
            max-width: 375px;
        }

.heading-para {
            font-size: 20px;
            color: #060272;
            font-weight: 700;
            margin-bottom: 1.5rem;
            text-align: center;
        }

label {
            display: block;
            font-size: 14px;
            font-weight: 600;
            color: #333;
            margin-bottom: 5px;
        }

.select-menu {
            position: relative;
            width: 100%;
        }

.select-menu .select-btn {
            display: flex;
            height: 42px;
            border-radius: 5px;
            border: 1.25px solid #DFDFDF;
            background: #FFF;
            height: 42px;
            box-shadow: none;
            outline: none;
            padding: 0 12px;
            display: flex;
            align-items: center;
            cursor: pointer;
            justify-content: space-between;
        }

.select-menu .select-btn .sBtn-text {
            cursor: default;
            padding-right: 10px;
            width: 100%;
            height: 100%;
            border: none;
            box-shadow: none;
            outline: none;
            background: none;
        }

.select-menu .options {
            display: none;
            position: absolute;
            width: 100%;
            overflow-y: auto;
            max-height: 295px;
            background: #fff;
            border: 1.25px solid #DFDFDF;
            border-top: 0;
            border-radius: 0 0 5px 5px;
            list-style: none;
            margin: 0;
            padding: 14px 0;

}

.select-menu .options .option {
            display: flex;
            height: 33px;
            cursor: pointer;
            padding: 0 12px;
            align-items: center;
            background: #fff;
            border-radius: 0;
        }

.select-menu .options .option:hover {
            background: #F2F2F2;
        }

.select-menu .options .option .option-text {
            position: relative;
            color: #000;
            font-size: 15px;
            font-weight: 400;
        }

.select-btn i {
            transition: 0.3s;
        }

.select-menu.active .select-btn {
            border-bottom: 0;
            border-radius: 5px 5px 0 0;
        }

.select-menu.active .select-btn i {
            transform: rotate(-180deg);
        }

.select-menu.active .options {
            display: block;
            z-index: 10;

}

.select-menu .options .option.active .option-text {
            font-weight: 600;
        }

.select-menu .options .option.active .option-text::before {
            content: url('https://www.teknowize.com/attachments/file_1688847322.svg');
            position: absolute;
            right: -1.5rem;
        }

JS Copied

// Select Dropdown Start
        selectBtn = document.querySelectorAll(".select-btn");
        selectBtn.forEach((showHide) => {
            showHide.addEventListener("click", () =>
                showHide.closest('.select-menu').classList.toggle("active")
            );
            var allOptions = showHide.closest('.select-menu').querySelector('.options').querySelectorAll('.option');
            allOptions.forEach((option) => {
                option.addEventListener("click", (e) => {
                    e.stopPropagation();
                    let items = e.target.closest('.options').querySelectorAll('.option');
                    items.forEach(element => {
                        element.classList.remove('active');
                    });
                    e.target.closest('.option').classList.add('active');
                    let selectedOption = option.querySelector(".option-text").innerText;
                    option.closest('.select-menu').querySelector('.select-btn').querySelector('.sBtn-text').value = selectedOption;
                    option.closest('.select-menu').classList.remove("active");
                });
            });
        });

// Add tick which selected
        let dropdowns = document.querySelectorAll('.select-menu');
        dropdowns.forEach(element => {
            element.addEventListener('click', (e) => {
                dropdowns.forEach((item) => {
                    if (item.className.includes('active')) {
                        item.classList.remove('active')
                    }
                });
                e.target.closest('.select-menu').classList.add('active')
            })
        });

// Close when click outside
        window.onclick = function (event) {
            if (!event.target.matches('.select-menu')) {