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: