Styling the Dropdown Field

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.

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.

/* 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;
}

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.

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.