How to style a dropdown using CSS?

Last Updated : 19 Nov, 2019

There are many ways to design <select> dropdown menu using CSS. Dropdown menu is mainly used to select an element from the list of elements.

Example 1: This example contains the dropdown CSS property to display the appearance of dropdown box. It contains the CSS property to set the dropdown background color, text-color, font-size, cursor pointer etc.

<!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: This example contains some CSS property to display the appearance of dropdown box where -webkit-, -moz- and -ms- used for browser support.

<!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:

My Personal Notes

Related Articles