Dropdown fields in forms lets user select an option among a set of choices. You can use dropdown fields to get information like country, state etc. It is quite easy to change the design of dropdown fields using Styler for WpForms plugin and custom CSS codes. In this tutorial you will learn the steps to make the design changes.You can also check the turtorial to change the design of text fields.

Style WpForms Dropdown Fields with Free Plugin

Styler for WpForms is a free WordPress plugin which is built on customizer API which allows you to modify design of your form fields in frontend with live preview. This plugin has 100+ options to change font color, font family, border, padding etc.

Here are the steps to modify the styling of dropdown fields with Styler for WpForms plugin

• Download Styler for WpForms plugin from WordPress repository and activate it.
• Now Select the Form you want to design and then go to Dropdown Fields option.

Dropdown fields with Styler for WpForms

• Using the dropdown fields settings you can style the drop down fields. It includes the following properties:
  • Maximum width: This option determines the width which can be applied to the dropdown fields.
  • Font  size : This property is used to define the font-size of the  text.
  • Font  color :  You can use the font color property to give the color to the fields.
  • Border size : This property allows you to specify the size of the border .
  • Border type:  You can use any type of border  by selecting from the given options . The default type is inherit .
  • Border color :  Using the border color option you can select any color you want to use for the field border.
  • Border radius : border radius allows you to define the radius for the border . you can give its value in px,% or ems.
  • Background color: This option can be used to select the background color for the dropdown fields .
  • Margin:  This option  is used to create a space around the dropdown fields. You can also use margin-top,margin-left,margin-bottom and margin-right properties .
  • Padding : This option is used to  provide the space between the text and the fields. You can also use padding-top,padding-right, padding-bottom and padding-left properties.
• To make the changes live you have to click on the Publish button.

Here is the video tutorial showing all the above steps in action

Style WpForms Dropdown Fields with CSS

By using custom CSS you can use all the properties available in Styler for WpForms as well as any other that you want but it isn’t available in the plugin. Here is the CSS code for modifying the styling of dropdown fields. The following code should be either placed in style.css of your current active theme file or you can also place in in customizer -> Additional CSS.

Note: You must replace FORMID with actual id of the form you are designing.

Code Explanation: 
body #wpforms-FORMID .wpforms-form .wpforms-field.wpforms-field-select select

The above code tells browser to find all the dropdown fields in the form and then apply the properties under that code to them. In the above example the font color will become #ccc and a dotted border of 2px with #ddd as color will be applied.