How to Create Select Dropdown Menu using HTML, CSS and JS

AuthorSumit Dey Sarkar

Pubish Date30 Jan 2024

categoryJavaScript

In this tutorial, we will see how to create select menu using HTML, CSS and JS.

How to Create Select Dropdown Menu using HTML, CSS and JS

Creating a custom <select> dropdown with HTML, CSS and JS

Here we create select dropdown with the help of HTML, CSS and JS. Using HTML and CSS we create the structure of select dropdown and styling this with the help of CSS. Javascript is use to make dropdown functional.

Let's follow the below steps -

Step 1: Create structure of dropdown using 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>How to Create Select Dropdown Menu using HTML, CSS and JS</title>
</head>
<body>
    <div class="main-div">
        <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>

Step 2: Styling the HTML structure using 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;
}

Step 3: Make dropdown functional using JS

// 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')) {

                var sharedowns = document.getElementsByClassName("select-menu");
                var i;
                for (i = 0; i < sharedowns.length; i++) {
                    var openSelectdropdown = sharedowns[i];
                    if (openSelectdropdown.classList.contains('active')) {
                        openSelectdropdown.classList.remove('active');
                    }
                }
            }
        }
        var allSelectMenus = document.querySelectorAll(".select-menu");
        allSelectMenus.forEach((eachSelectMenus) => {
            eachSelectMenus.addEventListener('click', function (event) {
                event.stopPropagation();
            });
        })
// Select Dropdown End

Let's Combine HTML, CSS and Js code together

<!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>How to Create Select Dropdown Menu using HTML, CSS and JS</title>
    <style>
        * {
    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;
}
            
    </style>
</head>
<body>
    <div class="main-div">
        <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>

    <script>
        // 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')) {

                var sharedowns = document.getElementsByClassName("select-menu");
                var i;
                for (i = 0; i < sharedowns.length; i++) {
                    var openSelectdropdown = sharedowns[i];
                    if (openSelectdropdown.classList.contains('active')) {
                        openSelectdropdown.classList.remove('active');
                    }
                }
            }
        }
        var allSelectMenus = document.querySelectorAll(".select-menu");
        allSelectMenus.forEach((eachSelectMenus) => {
            eachSelectMenus.addEventListener('click', function (event) {
                event.stopPropagation();
            });
        })
// Select Dropdown End
    </script>
</body>
</html>

Output

How to Create Select Dropdown Menu using HTML, CSS and JS

Comments 0

Leave a comment

Related Categories
php
javascript
html
laravel
mysql
jquery
css
git
bootstrap
vue
android
python
server
All Categories
Programming
Code Snippets
HTML Entity
Best Of
Tools
Movies
Latest Posts
Popular Code Snippets
Popular Posts
Tools
CSS Minifier
Case Converter
Pincode Details Finder
PDF to Text
Age Calculator
Whiteboard
Gradient Generator
PX to REM Converter
REM to PX Converter
PX to EM Converter
EM to PX Converter
WEBP Converter