---
title: "How do I style a \"select\" dropdown with only CSS?"  
description: "How do I style a \"select\" dropdown with only CSS?"  
author: "Revati S Misra"  
published: 2023-04-27  
updated: 2023-06-07  
canonical: https://www.mindstick.com/forum/158033/how-do-i-style-a-select-dropdown-with-only-css  
category: "css-css3"  
tags: ["html", "css", "css selector"]  
reading_time: 2 minutes  

---

# How do I style a "select" dropdown with only CSS?

How do I [style](https://www.mindstick.com/articles/126300/apa-citation-style-get-to-know-about-it-for-your-next-assignment) a <[select](https://www.mindstick.com/forum/160534/orderby-then-select-vs-select-then-orderby-performance)> [dropdown](https://www.mindstick.com/articles/263/ajax-toolkit-dropdownextender-in-asp-dot-net) with only [CSS](https://www.mindstick.com/forum/514/background-gradient-ie7-css-problem)?

## Replies

### Reply by Aryan Kumar

- **Change the background color and border:** You can use the background-color and border properties to change the background color and border of the select dropdown. For example, the following CSS will change the background color to blue and the border to a solid black line:

Code snippet

```plaintext
select {
  background-color: blue;
  border: 1px solid black;
}
```

- **Change the font size and color:** You can use the font-size and color properties to change the font size and color of the text in the select dropdown. For example, the following CSS will change the font size to 16px and the color to black:

Code snippet

```plaintext
select {
  font-size: 16px;
  color: black;
}
```

- **Change the appearance of the dropdown arrow:** You can use the appearance property to change the appearance of the dropdown arrow. For example, the following CSS will change the arrow to a solid black triangle:

Code snippet

```plaintext
select {
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
}
select::after {
  content: "";
  position: absolute;
  top: 13px;
  right: 10px;
  width: 0;
  height: 0;
  border: 6px solid black;
  border-color: black transparent transparent transparent;
}
```

- **Change the behavior of the dropdown:** You can use the padding and width properties to change the behavior of the dropdown. For example, the following CSS will add 10px of padding to the left and right of the dropdown and set the width to 200px:

Code snippet

```plaintext
select {
  padding: 10px 0;
  width: 200px;
}
```

These are just a few ways to style a "select" dropdown with only CSS. You can use the CSS properties to change the appearance and behavior of the dropdown to fit your specific needs.


---

Original Source: https://www.mindstick.com/forum/158033/how-do-i-style-a-select-dropdown-with-only-css

Copyright © MindStick Software Pvt. Ltd. This Markdown version is provided for developers, AI systems, and offline reading.