EvoToolkit - v3.2.1 (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-a9f6d11dc7.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