How to Create a select Dropdown with CSS?

How-to-Create-a-select-Dropdown-with-CSS.jpg

You can create a <select> Dropdown with CSS by customising the arrow icon.

CSS (Cascading Style Sheet) is used to style the webpage. A select drop-down is a user interface element that allows you to choose one option from a predefined list. You can create the <select> dropdown using Arrow Icon, Options, Hover, and Active States. We will discuss these methods in detail.

Table of Contents:

Methods to Create a <select> Dropdown with CSS

Using CSS, you can create the dropdown. There are a few methods, like Arrow Icon, Options, Hover, and Active States, that are used to create the dropdown.

Method 1: Basic Method to Create a <select> Dropdown

You can remove the default browser settings and apply the custom designs, including colors, borders, padding, and font styles.

Example:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Basic Select Styling</title>
    <style>
        select {
            appearance: none; /* Removes default styling */
            -webkit-appearance: none;
            -moz-appearance: none;
            background-color: white;
            border: 1px solid #ccc;
            padding: 10px;
            font-size: 16px;
            border-radius: 5px;
            cursor: pointer;
            width: 200px;
        }
    </style>
</head>
<body>
    <label for="basic-select">Choose an option:</label>
    <select id="basic-select">
        <option value="option1">Option 1</option>
        <option value="option2">Option 2</option>
        <option value="option3">Option 3</option>
    </select>
</body>
</html>

Output:

image 6

Explanation: The dropdown can be styled with appearance: none for removing the default browser style, background-color: white for a clean look, border-radius: 5px for the rounded edges, and cursor: pointer to make the dropdown clickable.

Method 2: Using the Arrow Icon

You can replace the default dropdown with a custom icon using CSS properties like background and pseudo-elements

Example:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Custom Arrow Select</title>
    <style>
        select {
            appearance: none;
            background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="black"><path d="M7 10l5 5 5-5z"/></svg>');
            background-repeat: no-repeat;
            background-position: right 10px center;
            background-size: 16px;
            padding-right: 30px;
        }
    </style>
</head>
<body>
    <label for="custom-arrow-select">Choose an option:</label>
    <select id="custom-arrow-select">
        <option value="option1">Option 1</option>
        <option value="option2">Option 2</option>
        <option value="option3">Option 3</option>
    </select>
</body>
</html>

Output:

image 4

Explanation: The background-image: url() is used to add the custom arrow icon and the background-position: right 10px center is used to place the arrow on the right side. The padding property prevents the text from overlapping the arrow.

Get 100% Hike!

Master Most in Demand Skills Now!

Method 3: Using Option Tag

You can use the <option> elements to enhance the dropdown’s style. By adjusting their states, backgrounds, and text styles.

Example:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Focus Style Select</title>
    <style>
        select:focus {
            border-color: #007BFF;
            outline: none;
            box-shadow: 0 0 5px rgba(0, 123, 255, 0.5);
        }
    </style>
</head>
<body>
    <label for="focus-style-select">Choose an option:</label>
    <select id="focus-style-select">
        <option value="option1">Option 1</option>
        <option value="option2">Option 2</option>
        <option value="option3">Option 3</option>
    </select>
</body>
</html>

Output: 

image 2

Explanation: You can use select: focus to style the dropdown when you click on it. The box-shadow adds a glow effect to make the dropdown stand out when it’s active.

Method 4: Using Hover and Active States

Add effects when you hover over or click the dropdown to make it more user-friendly and easier to see.

Example:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Hover and Active States</title>
    <style>
        select:hover {
            border-color: #555;
        }
        select:active {
            background-color: #f8f8f8;
        }
    </style>
</head>
<body>
    <label for="hover-active-select">Choose an option:</label>
    <select id="hover-active-select">
        <option value="option1">Option 1</option>
        <option value="option2">Option 2</option>
        <option value="option3">Option 3</option>
    </select>
</body>
</html>

Output: 

image 1

Explanation: In this code, the select:hover is used to change the border color when moving your mouse over it. The select:active changes the background color.

Method 5: Responsive and Mobile-Friendly Method

You can ensure the dropdown scales on smaller screens, which makes it easy for mobile devices.

Example:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Responsive Select</title>
    <style>
        @media (max-width: 600px) {
            select {
                font-size: 14px;
                padding: 8px;
                width: 100%;
            }
        }
    </style>
</head>
<body>
    <label for="responsive-select">Choose an option:</label>
    <select id="responsive-select">
        <option value="option1">Option 1</option>
        <option value="option2">Option 2</option>
        <option value="option3">Option 3</option>
    </select>
</body>
</html>

Output: 

image 7

Explanation: The @media (max-width: 600px) makes sure everything looks good on smaller screens. width: 100% makes sure the dropdown works well on mobile devices.

Conclusion

You can use the CSS property to create a dropdown. The methods like Arrow Icon, Options, Hover, and Active States are used for this purpose. The above-discussed methods are the most efficient way to create a <select> Dropdown with CSS.

How to Create a <select> Dropdown with CSS? – FAQs

1. Why use appearance: none;?

The default browser styling is removed, and you can customize the dropdown.

2. How do I add a custom arrow?

The custom arrow can be added using the background-image property with a URL to your SVG or icon file.

3. How do I improve user experience?

You can use the hover, focus, and active states to add effects that make it interactive and make the dropdown user-friendly.

4. How do I ensure the dropdown works on mobile devices?

You can use the media queries (@media (max-width: 600px) to adjust the dropdown’s width for a small screen.

5. How do I change the font style of the dropdown options?

You can use the font-family property to set a custom font style.

About the Author

Software Developer | Technical Research Analyst Lead | Full Stack & Cloud Systems

Ayaan Alam is a skilled Software Developer and Technical Research Analyst Lead with 2 years of professional experience in Java, Python, and C++. With expertise in full-stack development, system design, and cloud computing, he consistently delivers high-quality, scalable solutions. Known for producing accurate and insightful technical content, Ayaan contributes valuable knowledge to the developer community.

Full Stack Developer Course Banner