Examples
Default styling
Choose
Title
S
M
L
XL
Not available
XL
.is-loading
is loading
Choose
Title
S
M
L
XL
Not available
XL
.is-success
is success
Choose
Title
S
M
L
XL
Not available
XL
.is-error
is error
Choose
Title
S
M
L
XL
Not available
XL
.customSelect--small
Small Custom Select
Choose
Title
S
M
L
XL
Not available
XL
.customSelect--small.is-loading
Small Custom Select is loading
Choose
Title
S
M
L
XL
Not available
XL
.customSelect--small.is-success
Small Custom Select is success
Choose
Title
S
M
L
XL
Not available
XL
.customSelect--small.is-error
Small Custom Select is error
Choose
Title
S
M
L
XL
Not available
XL
Markup
<div class="customSelect js-customSelect [modifier class]">
<select>
<option disabled selected></option>
<option value="s">S</option>
<option value="m">M</option>
<option value="l">L</option>
<option value="xl" disabled>XL</option>
<option value="xxl">XXL</option>
</select>
<div class="customSelect__selected">Choose</div>
<div class="customSelect__dropdown">
<div class="customSelect__dropdownClose">
<i class="icon icon-close"></i>
</div>
<div class="customSelect__dropdownHeader d-block d-sm-none">
<div class="customSelect__dropdownTitle">
Title
</div>
</div>
<div class="customSelect__dropdownItem" data-value="s">
<div class="customSelect__dropdownItemHeadline">S</div>
</div>
<div class="customSelect__dropdownItem" data-value="m">
<div class="customSelect__dropdownItemHeadline">M</div>
</div>
<div class="customSelect__dropdownItem" data-value="l">
<div class="customSelect__dropdownItemHeadline">L</div>
</div>
<div class="customSelect__dropdownItem disabled" data-value="xl">
<div class="customSelect__dropdownItemHeadline">XL</div>
<div class="customSelect__dropdownItemText">Not available</div>
</div>
<div class="customSelect__dropdownItem" data-value="xxl">
<div class="customSelect__dropdownItemHeadline">XL</div>
</div>
</div>
</div>
Source:
build/doc/doc.css, line 12375