Examples
Default styling
hover
Hover state
focus
Focus state
disabled
Disabled state
error
Error state
Markup
<div class="input input--[modifier class]">
<label for="select-[modifier class]" class="input__label">Native Select</label>
<div class="select">
<select type="text" id="select-[modifier class]" class="input__widget select__widget" size="1" [modifier class]>
<option>Value</option>
<option>Value 2</option>
<option>Value 3</option>
</select>
</div>
<p class="input__message">Message</p>
</div>
<div class="input input--[modifier class]">
<label class="input__label">Custom Select</label>
<input class="select__toggle" type="checkbox" id="select-custom-[modifier class]" tabindex="-1">
<div class="select select--custom">
<label class="input__widget select__widget" for="select-custom-[modifier class]">Bitte wählen</label>
<div class="select__content">
<ul class="unstyled-list">
<li>
<a href="javascript://">Value</a>
</li>
<li>
<a href="javascript://">Value 2</a>
</li>
<li>
<a href="javascript://">Value 3</a>
</li>
</ul>
<p>
Some additional content
</p>
</div>
</div>
<p class="input__message">Message</p>
</div>
Source:
assets/styles/02-atoms/06-form-inputs/_select.scss, line 1