How to Style the Dropdown Field

Overview

Would you like to style the Dropdown field on your WPForms? Using a small CSS snippet, you can easily change the styling for this field.

By default, all browsers have their own default styling for all form fields. While we can use CSS to change things like the font size, color, background color, etc, we cannot change the styling of the field while it’s in focus. We can only change how the field appears on the page load and after a selection has been made.

Setup

For our form, we’re going to add the Name, Email, Paragraph Text (for comments), and a Dropdown field.

Next, we’re going to add some CSS that will style these fields and their placeholders. If you need help with how and where to add custom CSS, please check out this tutorial.

/* Style the form fields and Submit button including focus and hover for form ID 2771 */

form#wpforms-form-2771 select, form#wpforms-form-2771 input[type="text"], form#wpforms-form-2771 input[type="email"], form#wpforms-form-2771 textarea, form#wpforms-form-2771 button[type=submit] {
    background-color: #b95d52 !important;
    color: #fff !important;
    border: 1px solid #b95d52 !important;
	border-radius: 5px;
}

form#wpforms-form-2771 option:not(:checked) {
    background-color: #b95d52 !important;
    color: #fff !important;
    border: 1px solid #b95d52 !important;
}

form#wpforms-form-2771 button[type=submit]:hover, form#wpforms-form-2771 input[type="text"]:focus, form#wpforms-form-2771 input[type="email"]:focus, form#wpforms-form-2771 textarea:focus {
	background-color: #fff !important;
    color: #b95d52 !important;
    border: 1px solid #b95d52 !important;
}

/* Style the form field labels for form ID 2771 */
form#wpforms-form-2771 label.wpforms-field-label {
    color: #333333 !important;
}

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

Now you can see when the page loads, all fields have the consistent CSS added.

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.