EvoToolkit - v3.7.2 (Changelog)

Dropdown

Source

Contributors

Luke Harrison
  • Overview
  • Theming

Base

Example of the dropdown variant of the text input component, which requires a few extra elements present.

<div class='c-input'>
	<label class='c-input__label' for='dropdown-field'>Do you understand?</label>
	<div class='c-input__wrapper'>
		<select id='dropdown-field' name='dropdown' class='c-input__field' />
			<option value='yes'>Yes</option>
			<option value='no'>No</option>
			<option value='i-dont-know'>I don't know</option>
			<option value='repeat'>Could you repeat the question?</option>
		</select>
		<svg class='c-input__arrow'><use xlink:href="/static/img/evotoolkit-059f9bb4f6.svg#arrow" /></svg>
	</div>
</div>

You can theme the dropdown component to make it fit your brand. For more information on theming EvoToolkit, please see Configuring EvoToolkit.

Below is a list of theme variables and their default values.

Theme Variables

Theme Variables Default
$component-input-focus-color primary
$component-input-border-color light
$component-input-disabled-background-color very-light
$component-input-box-color very-light
$component-input-disabled-text-color light
$component-input-calendar-box-border-color primary