Here we will see how to style HTML Form <select> menu.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 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> <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> |