When adding dropdown menus to any USP Form, you may need to control the field’s height, overflow, and other properties. This quick tutorial explains a couple of ways to customize Tag fields, Category fields, Taxonomy fields, and custom select fields.

Category Field

When using the Category Shortcode to add a Category field to your form, you can control the field height by adding the size attribute, for example:

[usp_category include="all" type="dropdown" multiple="true" size="10"]

This works when type is set to dropdown and multiple is set to true.

We also can control the height and overflow properties of the Category field with a line of CSS:

<style>.usp-input.usp-input-category { height: 50px; overflow: auto; }</style>

Edit the height and overflow values to suit your needs. And/or add other properties as desired to customize the appearance of the field.

Tag Field

When using the Tags Shortcode to add a Tags field to your form, you can control the field height by adding the size attribute, for example:

[usp_tags include="all" type="dropdown" multiple="true" size="10"]

This works when type is set to dropdown and multiple is set to true.

We also can control the height and overflow properties of the Tags field with a line of CSS:

<style>.usp-input.usp-input-tags { height: 50px; overflow: auto; }</style>

Edit the height and overflow values to suit your needs. And/or add other properties as desired to customize the appearance of the field.

Taxonomy Field

When using the Taxonomy Shortcode to add a Taxonomy field to your form, you can control the field height by adding the size attribute, for example:

[usp_taxonomy tax="people" terms="all" type="dropdown" multiple="true" size="10"]

This works when type is set to dropdown and multiple is set to true.

We also can control the height and overflow properties of the Taxonomy field with a line of CSS:

<style>.usp-input.usp-input-taxonomy{ height: 50px; overflow: auto; }</style>

Edit the height and overflow values to suit your needs. And/or add other properties as desired to customize the appearance of the field.

Custom Select Field

When using the Custom Field Shortcode to add a custom select field to your form, you can control the field height by adding the size attribute, for example:

field#select|options#null:Option 1:Option 2:Option 3|option_default#Please Select..|option_select#null|label#Options|multiple#true|size#10

This works when field is set to select and multiple is set to true.

We also can control the height and overflow properties of the custom select field with a line of CSS:

<style>.usp-input.usp-select { height: 50px; overflow: auto; }</style>

Edit the height and overflow values to suit your needs. And/or add other properties as desired to customize the appearance of the field.

Notes

Using any of the default USP Form styles and a well-styled theme, all dropdown/select fields should look great out of the box. The techniques provided on this page are meant as a guide to help users who may find it necessary to further customize the appearance of their form fields.

Resources