How to Style a Dropdown Using CSS?
Last Updated :
19 Jul, 2025
To style a dropdown using CSS means customizing how a <select> element and its options appear—such as changing the width, background, font, border, or hover effects.
You can style dropdowns using basic CSS properties or enhance them further with pseudo-classes like :hover and :focus, and even use wrappers or custom arrows for a more modern look.
In 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
<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>
Example 2: Cross-browser Compatibility with Vendor Prefixes
Different 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>
Best Practices for Styling Dropdowns
- Maintain Accessibility: Ensure that your custom styles do not hinder keyboard navigation or screen reader accessibility.
- Consistent Design: Keep the dropdown's appearance consistent with the overall theme of your website.
- Responsive Layout: Make sure the dropdown is usable on various devices, including mobile phones and tablets.
- Fallbacks: Provide fallback styles for browsers that may not fully support certain CSS properties.
Conclusion
Styling dropdown lists using CSS allows you to create more engaging and user-friendly forms. By customizing the appearance and behavior of dropdowns, you can enhance the overall user experience on your website.
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.
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