HTML Form Select Menu Styling

Admin

2 months ago

Here we will see how to style HTML Form <select> menu.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Custom Select Dropdown</title>
    <style>
        /* Hide the native select */
        select {
            display: none;
        }

        /* Style the select wrapper */
        .select-wrapper {
            position: relative;
            width: 200px;
            cursor: pointer;
        }

        .selected-option {
            padding: 10px;
            border: 1px solid #ccc;
            border-radius: 5px;
            background-color: #fff;
            color: #333;
            font-size: 16px;
        }

        .select-wrapper::after {
            content: '▼';
            position: absolute;
            top: 50%;
            right: 10px;
            transform: translateY(-50%);
            pointer-events: none;
            color: #333;
        }

        /* Custom dropdown styling */
        .custom-select {
            display: none;
            position: absolute;
            top: 100%;
            left: 0;
            width: 100%;
            background-color: #fff;
            border: 1px solid #ccc;
            border-radius: 0 0 5px 5px;
            z-index: 1;
        }

        .custom-select .option {
            padding: 10px;
            cursor: pointer;
        }

        .custom-select .option:hover {
            background-color: red;
            color: #fff;
        }

        /* Highlight the selected option */
        .custom-select .option.selected {
            background-color: red;
            color: #fff;
        }

        /* Show dropdown when wrapper is active */
        .select-wrapper.active .custom-select {
            display: block;
        }
    </style>
</head>
<body>
    <div class="select-wrapper">
        <div class="selected-option">Select an option</div>
        <select>
            <option value="1">Option 1</option>
            <option value="2">Option 2</option>
            <option value="3">Option 3</option>
            <option value="4">Option 4</option>
        </select>
        <div class="custom-select">
            <div class="option" data-value="1">Option 1</div>
            <div class="option" data-value="2">Option 2</div>
            <div class="option" data-value="3">Option 3</div>
            <div class="option" data-value="4">Option 4</div>
        </div>
    </div>

    <script>
        const selectWrapper = document.querySelector('.select-wrapper');
        const selectElement = document.querySelector('select');
        const selectedOption = document.querySelector('.selected-option');
        const customSelect = document.querySelector('.custom-select');

        // Handle option click
        customSelect.querySelectorAll('.option').forEach(option => {
            option.addEventListener('click', () => {
                const value = option.getAttribute('data-value');
                const text = option.textContent;
                selectedOption.textContent = text;
                selectElement.value = value; // Set the value of the hidden select element

                // Update custom dropdown to highlight the selected option
                customSelect.querySelectorAll('.option').forEach(opt => {
                    opt.classList.remove('selected');
                });
                option.classList.add('selected');

                selectWrapper.classList.remove('active');
            });
        });

        // Toggle dropdown visibility on selected option click
        selectedOption.addEventListener('click', () => {
            selectWrapper.classList.toggle('active');
        });

        // Hide dropdown when clicking outside
        document.addEventListener('click', (e) => {
            if (!selectWrapper.contains(e.target)) {
                selectWrapper.classList.remove('active');
            }
        });
    </script>
</body>
</html>

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

117

118

119

120

121

122

123

124

125

126

127

128

<!DOCTYPE html>

<head>

<title>Custom Select Dropdown</title>

<style>

/* Hide the native select */

select {

display: none;

}

/* Style the select wrapper */

.select-wrapper {

position: relative;

width: 200px;

cursor: pointer;

}

.selected-option {

padding: 10px;

border: 1px solid #ccc;

border-radius: 5px;

background-color: #fff;

color: #333;

font-size: 16px;

}

.select-wrapper::after {

content: '▼';

position: absolute;

top: 50%;

right: 10px;

transform: translateY(-50%);

pointer-events: none;

color: #333;

}

/* Custom dropdown styling */

.custom-select {

display: none;

position: absolute;

top: 100%;

left: 0;

width: 100%;

background-color: #fff;

border: 1px solid #ccc;

border-radius: 0 0 5px 5px;

z-index: 1;

}

.custom-select .option {

padding: 10px;

cursor: pointer;

}

.custom-select .option:hover {

background-color: red;

color: #fff;

}

/* Highlight the selected option */

.custom-select .option.selected {

background-color: red;

color: #fff;

}

/* Show dropdown when wrapper is active */

.select-wrapper.active .custom-select {

display: block;

}

</style>

</head>

<body>

<div class="selected-option">Select an option</div>

<option value="1">Option 1</option>

<option value="2">Option 2</option>

<option value="3">Option 3</option>

<option value="4">Option 4</option>

</select>

<div class="option" data-value="1">Option 1</div>

<div class="option" data-value="2">Option 2</div>

<div class="option" data-value="3">Option 3</div>

<div class="option" data-value="4">Option 4</div>

</div>

const selectWrapper = document.querySelector('.select-wrapper');

const selectElement = document.querySelector('select');

const selectedOption = document.querySelector('.selected-option');

const customSelect = document.querySelector('.custom-select');

// Handle option click

customSelect.querySelectorAll('.option').forEach(option => {

option.addEventListener('click', () => {

const value = option.getAttribute('data-value');

const text = option.textContent;

selectedOption.textContent = text;

selectElement.value = value; // Set the value of the hidden select element

// Update custom dropdown to highlight the selected option

customSelect.querySelectorAll('.option').forEach(opt => {

opt.classList.remove('selected');

});

option.classList.add('selected');

selectWrapper.classList.remove('active');

});

// Toggle dropdown visibility on selected option click

selectedOption.addEventListener('click', () => {

selectWrapper.classList.toggle('active');

});

// Hide dropdown when clicking outside

document.addEventListener('click', (e) => {

if (!selectWrapper.contains(e.target)) {

selectWrapper.classList.remove('active');

}

});

</script>

</body>

</html>