How to useCSS Styling in HTML

Approach 2: Using CSS Pseudo-Elements

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

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 useCSS Styling in HTML

HTML

CSS

How to style the option of an HTML select element?

Similar Reads