How to Style Select Dropdown in CSS

1. Use appearance:none to Hide the Default Arrow and Set a Custom Arrow in the Select Dropdown in CSS
2. Use overflow:hidden to Hide the Default Arrow and Set a Custom Arrow in the Select Dropdown in CSS

In this article, we will introduce some methods to style the select dropdown menu in CSS.

Use appearance:none to Hide the Default Arrow and Set a Custom Arrow in the Select Dropdown in CSS

We can style the select dropdown menu using only CSS by hiding the default arrow set and adding a custom arrow set. There is a CSS property appearance that defines the styling of an element based on the operating system. The styles applied with the appearance property will be platform-native. We can use this property on the select tag and define the arrow in the dropdown menu. The none option in the appearance property will hide the default arrow from the dropdown. Then, we can upload our custom arrow. We can use the -webkit-appearance and -moz-appearance properties in the WebKit-based and Blink-based browsers.

For example, create a dropdown list using the select and option tags in HTML. Write options of your choice. In CSS, select the select tag and set the different properties like margin, width, height, padding, font-size, border. Next, use the appearance property and set it to none. Then, use the background shorthand property to set the custom arrow. Use the url() function to select the image. Style the image with properties like background-repeat, background-size and background-color. Use the no-repeat option to show the image once. Set the position to 100% and background-size to 15%.

Thus, we styled a dropdown menu using CSS.

Example Code:

<select>
 <option>RE Himalayan</option>
 <option selected>CRF Rally</option>
 <option>GS 310</option>
 <option>KTM ADV</option>
</select>

select {
 margin: 40px;
 width: 160px;
 padding: 4px 30px 4px 4px;
 font-size: 14px;
 border: 1px solid #eee;
 height: 30px;
 -webkit-appearance: none;
 -moz-appearance: none;
 appearance: none;
 background: url(/img/DelftStack/logo.png) 100% / 15% no-repeat #ccc;
}

Use overflow:hidden to Hide the Default Arrow and Set a Custom Arrow in the Select Dropdown in CSS

We can wrap the select tag with a div and set its overflow to hidden to hide the default arrow in the dropdown menu. Then, we can add our custom arrow, the same as the first method. The overflow property set to hidden will clip the overflow in the container. The rest of the content will be hidden. We will define the width of the div less than the dropdown menu. So, the arrow in the dropdown menu will fall outside of the container when using the hidden value on the overflow property. Finally, we can add our custom arrow.

For example, create a div with the class menu. Inside the div, write the same dropdown items as in the first method. In CSS, select the select tag that is a descendant of the menu class as .menu select, and apply the styles. Set the background to transparent. Create the width of 140px. Set font-size to 14px and create a border. Set the height of the menu to 35px. Next, select the menu class and give the margin of 40px, width of 125px and height of 34px. Make sure the width of the container is less than the menu. Next, set the overflow to hidden and set the background image as the first method.

Here, we removed the default arrow of the dropdown menu and, we added a custom arrow. Thus, we can style the select dropdown menu in CSS.

Example Code:

<div class="menu">
 <select>
 <option>RE Himalayan</option>
 <option selected>CRF Rally</option>
 <option>GS 310</option>
 <option>KTM ADV</option>
 </select>
</div>

.menu select {
 background: transparent;
 width: 140px;
 font-size: 14px;
 border: 1px solid #eee;
 height: 35px; 
} 
.menu{
 margin: 40px;
 width: 125px;
 height: 34px;
 border: 1px solid black;
 overflow: hidden;
 background: url(/img/DelftStack/logo.png) 100% / 15% no-repeat #ccc;
}