How to style the option of an HTML select element?

Q: 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.

How to find all selected options of HTML select tag ?

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

Approach 1: Using CSS Styling

First, target the “select” element using the selector and apply styling to it. Set the width, background color, text color, and border properties to style the selected element. Then, target the option elements within the select element using the < select > option selector. We apply background color and text color to style the options.

Example: Illustration of styling the option of an HTML select element Using CSS Styling.

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>
        <select>
            <option>Option 1</option>
            <option>Option 2</option>
            <option>Option 3</option>
        </select>
    </div>
</body>
 
</html>

CSS

select {
    width: 10rem;
    background-color: #c3f0c6;
    border: #b2eeac 2px solid;
}
 
select>option {
    background-color: #b8e1ba;
}

Output:

Output

Approach 2: Using CSS Pseudo-Elements

Style the options using the option selector, setting the font size and background color. Next, we use the option:before pseudo-element to insert content before each option. In this case, we’re adding a “>” symbol. We initially set display: none; for the pseudo-element to hide it by default. Upon hovering over an option (option:hover:before), we set display: inline; to show the “>” symbol.

Example: Illustration of styling the option of an HTML select element using CSS pseudo-elements.

HTML

<!DOCTYPE html>
<html lang="en">
 
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, initial-scale=1.0">
    <title>Pseudo Elements</title>
    <link rel="stylesheet" href="style.css" />
</head>
 
<body>
    <div>
        <select id="ddlProducts" name="Programming Languages">
            <option>Language1 : C++ </option>
            <option>Language2 : Java </option>
            <option>Language3 : Python </option>
            <option>Language4 : JavaScript </option>
        </select>
    </div>
</body>
 
</html>

CSS

option {
    font-size: 18px;
    background-color: #ffffff;
}
 
option:before {
    content: ">";
    font-size: 20px;
    display: none;
    padding-right: 10px;
    padding-left: 5px;
    color: #fff;
}
 
option:hover:before {
    display: inline;
}

Output:

Output

Approach 3: Using Custom Dropdown

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

Tags:

#HTML-Questions #HTML #Web Technologies

How to find all selected options of HTML select tag ?