How to useCustom Dropdown in HTML

Approach 2: Using CSS Pseudo-Elements

The HTML structure consists of a container with two nested div elements. The first div with class “select-selected” represents the currently selected option, and the second div with class “select-items” contains the dropdown options. The JavaScript code handles the functionality of the custom dropdown. It toggles the visibility of the dropdown when the select box is clicked, sets the selected option when an option is clicked, and closes the dropdown when the user clicks outside of it.

Example: Illustration of styling the option of an HTML select element using a custom dropdown.

HTML

<!DOCTYPE html>
<html lang="en">
 
<head>
    <meta charset="UTF-8" />
    <meta name="viewport"
          content="width=device-width, initial-scale=1.0" />
    <title>Demo</title>
    <link rel="stylesheet" href="style.css" />
</head>
 
<body>
    <div class="custom-select">
        <div class="select-selected">
              Select an Option
          </div>
        <div class="select-items">
            <div>Select Option 1</div>
            <div>Select Option 2</div>
            <div>Select Option 3</div>
        </div>
    </div>
    <script src="script.js"></script>
</body>
 
</html>

CSS

.custom-select {
    position: relative;
    display: inline-block;
}
 
.select-selected {
    background-color: #f7f7f7;
    color: #333333;
    padding: 5px 10px;
    cursor: pointer;
}
 
/* Style the dropdown items */
.select-items {
    position: absolute;
    display: none;
    background-color: #d88181;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    border-radius: 4px;
    z-index: 1;
    width: 100%;
}
 
/* Style the dropdown items */
.select-items div {
    padding: 10px;
    cursor: pointer;
}
 
/* Style the dropdown items on hover */
.select-items div:hover {
    background-color: #c69c9c;
}

Javascript

// Get all custom select elements
let customSelects = document.querySelectorAll('.custom-select');
 
// Attach click event listeners to each custom select
customSelects.forEach(function (select) {
    let selectSelected = select.querySelector('.select-selected');
    let selectItems = select.querySelector('.select-items');
    let options = selectItems.querySelectorAll('div');
 
    // Toggle the dropdown visibility when the select box is clicked
    selectSelected.addEventListener('click', function () {
        if (selectItems.style.display === 'block') {
            selectItems.style.display = 'none';
        } else {
            selectItems.style.display = 'block';
        }
    });
 
    // Set the selected option and hide the dropdown when an option is clicked
    options.forEach(function (option) {
        option.addEventListener('click', function () {
            selectSelected.textContent = option.textContent + " ????";
            selectItems.style.display = 'none';
        });
    });
 
    // Close the dropdown if the user clicks outside of it
    window.addEventListener('click', function (e) {
        if (!select.contains(e.target)) {
            selectItems.style.display = 'none';
        }
    });
});

Output:

Output

How to style the option of an HTML select element?

Styling the options of an HTML <select> element can enhance the visual appearance and usability of dropdown menus, making them more appealing and user-friendly. Styling options can be used to highlight or differentiate certain options, improving readability and guiding user interaction.

Table of Content

Using Pure CSS
Using CSS Pseudo-Elements
Using Custom Dropdown

Tags:

#HTML-Questions #HTML #Web Technologies

Approach 2: Using CSS Pseudo-Elements

How to useCustom Dropdown in HTML

HTML

CSS

Javascript

How to style the option of an HTML select element?

Similar Reads