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