How to Style the Dropdown Field

Updated:

Are you seeking to personalize the appearance of the Dropdown field within your WPForms? With a concise CSS code snippet, you can effortlessly tailor the style of this field to suit your preferences.

By default, web browsers apply their own styling to form fields, including Dropdowns. While CSS empowers us to modify aspects such as font size, color, and background, altering the field’s appearance while it’s in focus presents a challenge. However, we can readily adjust its presentation upon page load and after a selection has been made.

Creating the form

To begin, we’re going to create just a simple contact form that will include the Name, Email, Paragraph Text (for comments), and a Dropdown field for how the use heard about our site.

create your form and add your fields

If you need any assistance in creating your form, please checkout this useful guide.

Customizing the style of the dropdown field

In this next section, we’re going to run through some various CSS changes to help customize the style of this field.

If you need help with how and where to add custom CSS, please check out this tutorial.

Styling the background and text color

This example is specifically for the form ID 1277.

/* Common styles for form fields and submit button */
form#wpforms-form-1277 select,
form#wpforms-form-1277 input[type="text"],
form#wpforms-form-1277 input[type="email"],
form#wpforms-form-1277 textarea,
form#wpforms-form-1277 button[type="submit"],
form#wpforms-form-1277 option:not(:checked) {
    background-color: #b95d52 !important;
    color: #fff !important;
    border: 1px solid #b95d52 !important;
    border-radius: 5px;
}

/* Hover and focus styles for form fields and submit button */
form#wpforms-form-1277 button[type="submit"]:hover,
form#wpforms-form-1277 input[type="text"]:focus,
form#wpforms-form-1277 input[type="email"]:focus,
form#wpforms-form-1277 textarea:focus {
    background-color: #fff !important;
    color: #b95d52 !important;
	box-shadow: none !important;
}

/* Form field labels */
form#wpforms-form-1277 label.wpforms-field-label {
    color: #333333 !important;
}

/* Placeholder styles */
/* Style the placeholders for form ID 2771 */
form#wpforms-form-1277 ::-webkit-input-placeholder { /* Chrome and Safari */
   color: #fff !important;
}
form#wpforms-form-1277 :-moz-placeholder { /* Mozilla Firefox 4 to 18 */
   color: #fff !important;
   opacity: 1 !important;
}
form#wpforms-form-1277 ::-moz-placeholder { /* Mozilla Firefox 19+ */
   color: #fff !important;
   opacity: 1;
}
form#wpforms-form-1277 :-ms-input-placeholder { /* Internet Explorer 10-11 */
   color: #fff !important;
}
form#wpforms-form-1277 ::-ms-input-placeholder { /* Microsoft Edge */
   color: #fff !important;
}
form#wpforms-form-1277 ::placeholder {
   color: #fff !important;
}

The -1277 referenced in the CSS snippet is the form ID. This means that only the fields added to the form ID 1277 would be affected by this CSS. You’ll need to update this to match your own form ID. If you need help in where to find your form ID, please checkout this guide for further assistance.

after the CSS has been added, you can now see that even the dropdown shares the same custom styling that the other fields have

If you would like this for all forms on your site, use this CSS instead. However, please remember that this CSS is only covering the fields we added in our form from the first step.

/* Common styles for form fields and submit button */
form.wpforms-form select,
form.wpforms-form input[type="text"],
form.wpforms-form input[type="email"],
form.wpforms-form textarea,
form.wpforms-form button[type="submit"],
form.wpforms-form option:not(:checked) {
    background-color: #b95d52 !important;
    color: #fff !important;
    border: 1px solid #b95d52 !important;
    border-radius: 5px;
}

/* Hover and focus styles for form fields and submit button */
form.wpforms-form button[type="submit"]:hover,
form.wpforms-form input[type="text"]:focus,
form.wpforms-form input[type="email"]:focus,
form.wpforms-form textarea:focus {
    background-color: #fff !important;
    color: #b95d52 !important;
	box-shadow: none !important;
}

/* Form field labels */
form.wpforms-form label.wpforms-field-label {
    color: #333333 !important;
}

/* Placeholder styles */
/* Style the placeholders for form ID 2771 */
form.wpforms-form ::-webkit-input-placeholder { /* Chrome and Safari */
   color: #fff !important;
}
form.wpforms-form :-moz-placeholder { /* Mozilla Firefox 4 to 18 */
   color: #fff !important;
   opacity: 1 !important;
}
form.wpforms-form ::-moz-placeholder { /* Mozilla Firefox 19+ */
   color: #fff !important;
   opacity: 1;
}
form.wpforms-form :-ms-input-placeholder { /* Internet Explorer 10-11 */
   color: #fff !important;
}
form.wpforms-form ::-ms-input-placeholder { /* Microsoft Edge */
   color: #fff !important;
}
form.wpforms-form ::placeholder {
   color: #fff !important;
}

Changing the style of the arrow

For this example, we’re only going to change the arrow that appears on the Dropdown field, we’re going to replace that arrow with an image uploaded to our site. This first CSS example would be applied to all WPForms Dropdown fields. 

.wpforms-field select {
  padding: 10px !important;
  padding-right: 30px !important;
  -moz-appearance: none !important;
  -webkit-appearance: none !important;
  appearance: none !important;
  
  /* Update this URL to where your image is stored */
  background-image: url('https://myexamplesite.com/wp-content/uploads/2024/04/png-transparent-arrow-computer-icons-drop-down-list-symbol-arrow-angle-rectangle-triangle.png') !important;
  background-repeat: no-repeat !important;
  background-position: right .7em center !important;

  /* Adjust the size according to your arrow image */
  background-size: 25px 25px !important; 
 }

For IE */
.wpforms-field select::-ms-expand {
  display: none !important;
}

If you’d like to only make this change for a specific form, please use this CSS and replace the -1277 to match your own form ID. 

form#wpforms-form-1277 .wpforms-field select {
  padding: 10px !important;
  padding-right: 30px !important;
  -moz-appearance: none !important;
  -webkit-appearance: none !important;
  appearance: none !important;
  
  /* Update this URL to where your image is stored */
  background-image: url('https://barbisbrightside.com/wp-content/uploads/2024/04/png-transparent-arrow-computer-icons-drop-down-list-symbol-arrow-angle-rectangle-triangle.png') !important;
  background-repeat: no-repeat !important;
  background-position: right .7em center !important;

  /* Adjust the size according to your arrow image */
  background-size: 25px 25px !important; 
 }

For IE */
form#wpforms-form-1277 .wpforms-field select::-ms-expand {
  display: none !important;
}

using this specific CSS you can easily change the arrow using your own uploaded image

Customizing the arrow with Font Awesome

Using the free Font Awesome plugin, we’re going to change the arrow of our dropdown using one of their fonts. To begin, you’ll need to download and install the Font Awesome plugin if you haven’t already.

Once the plugin is installed, you’ll want to pick your icon. For the purpose of this documentation, we’re going to use "\f149" which is a down arrow with a little flare. 

/* Hide the default arrow */
#wpforms-1277-field_24-container select {
  -moz-appearance: none !important;
  -webkit-appearance: none !important;
  appearance: none !important;
  background-image: none !important;
  /* Add padding if necessary */
}

/* Apply Font Awesome arrow icon */

#wpforms-1277-field_24-container::after {
    font-family: fontawesome;
    content: "\f149";
    position: absolute;
	
	/* Adjust this based on your field size setting */
    top: 53%;
    pointer-events: none;
	
	/* Adjust this based on your field size setting */
    left: 95%;
}

We’ve made our Dropdown field size to Large. If you use anything other than large, you’ll need to adjust the top and left CSS rules.

When styling form fields using CSS, if you want to target specific elements like <select> fields, you typically need to use their respective IDs or classes because <select> fields cannot directly accept pseudo-elements like ::before and ::after.

Additionally, since pseudo-elements are not supported by <select> elements, you’ll need to target each field ID specifically in your CSS if you want to customize them. This means you’ll have to update the form and field IDs accordingly in your CSS selectors to ensure that the styles are applied correctly to each specific field. For assistance in finding these IDs for your form, please refer to this documentation.

And that’s all you need to style the Dropdown field on WPForms. 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.

Tagged:
Still stuck? How can we help?
Last Updated on Apr 12, 2024