How to style a dropdown using CSS?

Last Updated : 20 Sep, 2024

We will learn how to style the dropdown list using CSS and explore its implementation through examples. Dropdown menus are commonly used to allow users to select an option from a predefined list. Styling them properly can enhance your website’s user experience and visual appeal.

What is a <select> Dropdown?

A dropdown menu is a UI element that lets users select one option from a list. In HTML, dropdown menus are created using the <select> tag, with each option defined by an <option> element inside it. Each <option> element is associated with a value that gets submitted when that particular option is selected.

How to Style a Dropdown List Using CSS

Here are two examples showing how to style a dropdown list using CSS properties.

Example 1: Basic Styling of a Dropdown Menu

In this example, we’ll style the dropdown menu by changing the background color, text color, and font size, and adding a pointer cursor to make it more engaging.

HTML

<!DOCTYPE html>
<html>

<head>
    <style>
        select {
            appearance: none;
            outline: 0;
            background: green;
            background-image: none;
            width: 100%;
            height: 100%;
            color: black;
            cursor: pointer;
            border: 1px solid black;
            border-radius: 3px;
        }

        .select {
            position: relative;
            display: block;
            width: 15em;
            height: 2em;
            line-height: 3;
            overflow: hidden;
            border-radius: .25em;
            padding-bottom: 10px;
        }

        h1 {
            color: green;
        }
    </style>
</head>

<body>
    <center>
        <h1>GeeksforGeeks</h1>
        <div class="select">
            <select name="slct" id="slct">
                <option>Computer Science Subjects</option>
                <option value="1">Operating System</option>
                <option value="2">Computer Networks</option>
                <option value="3">Data Structure</option>
                <option value="4">Algorithm</option>
                <option value="5">C programming</option>
                <option value="6">JAVA</option>
            </select>
        </div>
    </center>
</body>

</html>

Output:

Example 2: Cross-browser Compatibility with Vendor Prefixes

Different browsers render dropdowns differently, so using vendor prefixes helps maintain a consistent style across browsers. In this example, we’ll ensure the styling works on Chrome, Firefox, and Edge by using vendor-specific prefixes.

HTML

<!DOCTYPE html>
<html>

<head>
    <style>
        h1 {
            color: green;
        }

        select {
            -webkit-appearance: none;
            -moz-appearance: none;
            -ms-appearance: none;
            appearance: none;
            outline: 0;
            background: green;
            background-image: none;
            border: 1px solid black;
        }

        .select {
            position: relative;
            display: block;
            width: 20em;
            height: 3em;
            line-height: 3;
            background: #2C3E50;
            overflow: hidden;
            border-radius: .25em;
        }

        select {
            width: 100%;
            height: 100%;
            margin: 0;
            padding: 0 0 0 .5em;
            color: #fff;
            cursor: pointer;
        }

        select::-ms-expand {
            display: none;
        }

        .select::after {
            content: '\25BC';
            position: absolute;
            top: 0;
            right: 0;
            bottom: 0;
            padding: 0 1em;
            background: #34495E;
            pointer-events: none;
        }

        .select:hover::after {
            color: #F39C12;
        }

        < !-- For different browsers -->.select::after {
            -webkit-transition: .25s all ease;
            -o-transition: .25s all ease;
            transition: .25s all ease;
        }
    </style>
</head>

<body>
    <center>
        <h1>GeeksforGeeks</h1>
        <div class="select">
            <select name="slct" id="slct">
                <option>Computer Science Subjects</option>
                <option value="1">Operating System</option>
                <option value="2">Computer Networks</option>
                <option value="3">Data Structure</option>
                <option value="4">Algorithm</option>
                <option value="5">C programming</option>
                <option value="6">JAVA</option>
            </select>
        </div>
    </center>
</body>

</html>

Output:

CSS is the foundation of webpages, is used for webpage development by styling websites and web apps. You can learn CSS from the ground up by following this CSS Tutorial and CSS Examples.

Remove border from IFrame using CSS

Sabya_Samadder

Improve

Article Tags :

How to style a dropdown using CSS?

What is a <select> Dropdown?

How to Style a Dropdown List Using CSS

Example 1: Basic Styling of a Dropdown Menu

Example 2: Cross-browser Compatibility with Vendor Prefixes

Similar Reads

Thank You!

What kind of Experience do you want to share?