10 unit-select
The select unit.
10.1 Core
The core module.
10.1.1 Default style
The default style.
default
<span class="unit-select">
<select class="unit-select__field" name="select">
<option value="">select...</option>
<option value="option-1">Lorem ipsum dolor sit amet</option>
<option value="option-2">あのイーハトーヴォのすきとおった風</option>
</select>
</span>
<!-- disabled -->
<span class="unit-select">
<select class="unit-select__field" name="select" disabled="disabled">
<option value="">select...</option>
<option value="option-1">Lorem ipsum dolor sit amet</option>
<option value="option-2">あのイーハトーヴォのすきとおった風</option>
</select>
</span>10.2 Theme
The theme module.
10.2.1 Modifiers
The theme modifiers.
default
unit-select--theme-normal
Normal theme
<span class="unit-select {{modifier_class}}">
<select class="unit-select__field" name="{{modifier_class}}">
<option value="">select...</option>
<option value="option-1">Lorem ipsum dolor sit amet</option>
<option value="option-2">あのイーハトーヴォのすきとおった風</option>
</select>
</span>
<!-- disabled -->
<span class="unit-select {{modifier_class}}">
<select class="unit-select__field" name="{{modifier_class}}" disabled="disabled">
<option value="">select...</option>
<option value="option-1">Lorem ipsum dolor sit amet</option>
<option value="option-2">あのイーハトーヴォのすきとおった風</option>
</select>
</span>10.3 Inline
The inline module.
10.3.1 Modifiers
The inline modifiers.
default
unit-select--inline-true
Enable inline
<span class="unit-select unit-select--theme-normal {{modifier_class}}">
<select class="unit-select__field" name="{{modifier_class}}">
<option value="">select...</option>
<option value="option-1">Lorem ipsum dolor sit amet</option>
<option value="option-2">あのイーハトーヴォのすきとおった風</option>
</select>
</span>
<!-- disabled -->
<span class="unit-select unit-select--theme-normal {{modifier_class}}">
<select class="unit-select__field" name="{{modifier_class}}" disabled="disabled">
<option value="">select...</option>
<option value="option-1">Lorem ipsum dolor sit amet</option>
<option value="option-2">あのイーハトーヴォのすきとおった風</option>
</select>
</span>