HTML

<!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 JS</title>
    </head>

<body>
        <div class="main-div">
            <div class="main-div">
                <label for="job-title">Select 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.w3coderschool.com/attachments/file_1730637233.svg" alt="Chevron"></i>
                    </div>
                    <ul class="options">
                        <li class="option">
                            <span class="option-text">Frontend Developer</span>
                        </li>
                        <li class="option">
                            <span class="option-text">UI/UX Designer</span>
                        </li>
                    </ul>
                </div>
            </div>
        </div>
    </body>
</html>

CSS

* {
            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;
        }

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;
        }

document.querySelectorAll('.select-menu').forEach(menu => {
    const selectBtn = menu.querySelector('.select-btn');
    const options = menu.querySelectorAll('.option');
    const sBtnText = selectBtn.querySelector('.sBtn-text');

selectBtn.addEventListener('click', (e) => {
        e.stopPropagation();
        document.querySelectorAll('.select-menu').forEach(m => {
            if (m !== menu) m.classList.remove('active');
        });
        menu.classList.toggle('active');
    });

options.forEach(option => {
        option.addEventListener('click', (e) => {
            e.stopPropagation();
            options.forEach(opt => opt.classList.remove('active'));
            option.classList.add('active');
            sBtnText.value = option.querySelector('.option-text').innerText;
            menu.classList.remove('active');
        });
    });
});

window.addEventListener('click', () => {
    document.querySelectorAll('.select-menu').forEach(menu => {
        menu.classList.remove('active');
    });
});

Custom select menu using HTML, CSS and javaScript