How to style a dropdown using CSS?
In this article, we will know how to style the dropdown list using CSS & will understand its implementation through the examples. There are many ways to design a <select> dropdown menu using CSS. The Dropdown Menu is mainly used to select an element from the list of elements. Each menu option can be defined by an <option> element that can nested inside the <select> element. Each <option> element will be specified with the value attribute containing the data value that will be submitted to the server when that particular option is selected.
Example 1: This example contains the dropdown CSS property to display the appearance of the dropdown box. It contains the CSS property to set the dropdown background color, text-color, font-size, cursor pointer, etc.
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: This example contains some CSS properties to display the appearance of the dropdown box where -webkit-, -moz- and -ms- used for browser support.
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.
.png)
.png)