How to style a dropdown using CSS? Last Updated : 20 Sep, 2024 Summarize Comments Improve Suggest changes Share Like Article Like Report 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 CSSHere are two examples showing how to style a dropdown list using CSS properties.Example 1: Basic Styling of a Dropdown MenuIn 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 PrefixesDifferent 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. Comment More infoAdvertise with us Next Article 6 Best CSS frameworks You should Know to design Attractive Websites S Sabya_Samadder Follow Improve Article Tags : Technical Scripter Web Technologies CSS Technical Scripter 2018 CSS-Misc +1 More Similar Reads How to Set Background Color Opacity without Affecting Text in CSS? Here are two approaches to set a background color with opacity in CSS without affecting the text.1. Using RGBA color valuesTo set the opacity only to the background color and not the text inside it we can use RGBA color values instead of the opacity property. Because using the opacity property can c 2 min read Transition shorthand with multiple properties in CSS? The transition shorthand in CSS allows specifying multiple properties for smooth transitions between different states or values. The transition property in CSS is used to create transitions in an element, enabling changes to occur smoothly over a specified duration. This article demonstrates how to 2 min read How to prevent line breaks in the list of items using CSS? The display:inline-block property is used to show an element in the inline-level block container. It converts the block of elements into an inline element. Use height and width property to set an inline element. The display property is used to prevent a line break of a list of items. Syntax: element 1 min read How to remove the space between inline-block elements? To remove space between inline-block elements in CSS, ensure no whitespace or line breaks exist in HTML between elements. Alternatively, set the font-size of the parent to 0 and reset for elements, or apply a negative margin to elements. This ensures elements align seamlessly without unwanted spacin 3 min read 6 Best CSS frameworks You should Know to design Attractive Websites If you want to speed up your website and development process, or want to add some classy designs to your website, then you're at the right place. Awesome new popups, speed, ultimate colors and themes are waiting for you. Front end development is the complete pack of creation and colors and have amaz 3 min read Space between two rows in a table using CSS The space between two rows in a table can be done using CSS border-spacing and border-collapse properties. The border-spacing property is used to set the spaces between cells of a table and border-collapse property is used to specify whether the border of the table is collapsed or not. The border-sp 1 min read What is the difference between display: inline and display: inline-block in CSS? The display property in CSS is a very useful and commonly used property that contains many values. The display property defines how an HTML element should be displayed on the webpage. The property also specifies the type of box used for an HTML element and how it should be laid out on the page. If w 4 min read How to Write a:hover in Inline CSS? The :hover pseudo-selector in CSS enables you to modify the style of elements when a user hovers their mouse over them. This selector is widely used to improve user experience by adding visual feedback on elements like buttons, links, images, or any interactive items on a webpage. For the :hover eff 2 min read How to place two div side-by-side of the same height using CSS? The two or more different div of same height can be put side-by-side using CSS. Use CSS property to set the height and width of div and use display property to place div in side-by-side format. The used display property are listed below: display:table; This property is used for elements (div) which 2 min read What is a clearfix? A clearfix is a way for an element to automatically clear or fix its elements so that it does not need to add additional markup. It is generally used in float layouts where elements are floated to be stacked horizontally. If the element is taller than the element containing it then use the overflow 3 min read Like