### [Styling the Dropdown Field](https://wpforms.com/developers/how-to-style-the-dropdown-field/)

**Published:** March 27, 2023
**Author:** Editorial Team

**Excerpt:** This snippet will show you how to use CSS to style the Dropdown field on WPForms. 

**Content:**

Want to give your WPForms dropdown fields a custom look? While browsers apply their own default styling to dropdown fields, you can use CSS to create a unique appearance that matches your site’s design.

This guide will show you how to customize colors, borders, arrows, and more for your dropdown fields.

## Setting Up Your Form

Start by creating a form with a dropdown field. For this example, we’ll create a simple contact form with:

- Name field
- Email field
- Dropdown field (for “How did you hear about us?”)
- Paragraph field (for comments)

If you need help creating your form, please review our guide on [creating your first form](https://wpforms.com/docs/creating-first-form/).

## Styling the Background and Text

Here’s how to customize the basic appearance of your dropdown field. Remember to replace `1000` with your form ID:

If you need help with how and where to add custom CSS, please check out this tutorial on [adding custom CSS styles.](https://wpforms.com/developers/how-to-add-custom-css-styles-for-wpforms/ "How to Add Custom CSS Styles for WPForms")

```

/* Basic dropdown styling */
form#wpforms-form-1000 select {
    background-color: #b95d52;
    color: #fff;
    border: 1px solid #b95d52;
    border-radius: 5px;
    padding: 10px;
}

/* Hover and focus states */
form#wpforms-form-1000 select:hover,
form#wpforms-form-1000 select:focus {
    background-color: #fff;
    color: #b95d52;
    box-shadow: none;
}
```

## Customizing the Dropdown Arrow

You can replace the default dropdown arrow with a custom image:

```

/* Remove default arrow */
form#wpforms-form-1000 select {
    -moz-appearance: none;
    -webkit-appearance: none;
    appearance: none;
    padding-right: 30px;
    
    /* Add custom arrow image */
    background-image: url('your-arrow-image.png');
    background-repeat: no-repeat;
    background-position: right .7em center;
    background-size: 25px 25px;
}

/* Hide default arrow in IE */
form#wpforms-form-1000 select::-ms-expand {
    display: none;
}
```

## Adding Font Awesome Icons

For a more modern look, you can use Font Awesome icons as your dropdown arrow. First, install the Font Awesome plugin if you haven’t already.

```

/* Hide default arrow and prepare for Font Awesome */
#wpforms-form-1000-field_24-container select {
    -moz-appearance: none;
    -webkit-appearance: none;
    appearance: none;
    background-image: none;
    padding-right: 30px;
}

/* Add Font Awesome arrow */
#wpforms-form-1000-field_24-container::after {
    font-family: fontawesome;
    content: "\f149";  /* Font Awesome down arrow code */
    position: absolute;
    top: 53%;
    left: 95%;
    pointer-events: none;
}
```

If you’re using a field size other than **Large**, you’ll need to adjust the top and left values in the CSS.

When styling dropdown fields:

- Select (dropdown) elements cannot directly use pseudo-elements like `::before` and `::after`
- You must target specific form and field IDs for custom styling
- Browser support varies for certain CSS properties
- Field IDs can be found in your form’s **Field Options** panel

If you need help finding your form or field IDs, please check our guide on [finding form and field IDs](https://wpforms.com/developers/how-to-locate-form-id-and-field-id/).

And that’s all you need to style the **Dropdown** field on WPForms. Next, would you like to also change the styling on **Checkbox** and **Multiple Choice** fields? Check out our tutorial on [How to Customize Checkbox and Radio Fields to Look Like Buttons](https://wpforms.com/developers/how-to-customize-checkbox-and-radio-fields-to-look-like-buttons/ "How to Customize Checkbox and Radio Fields to Look Like Buttons").

**Categories:** Styling

**Tags:** CSS

---