There are no notes for this item.
<!-- Default -->
<div class="spinner">
<select name="dropdown-menu" class="input-box input-box--dropdown-menu input-box--default">
<option value="">Value 1</option>
<option value="">Value 2</option>
<option value="">Value 3</option>
</select>
<div class="input-box__spinner">
<button type="button" class="input-box__spinner__down"></button>
</div>
</div>
<!-- Selected -->
<div class="spinner">
<select name="dropdown-menu" class="input-box input-box--dropdown-menu input-box--selected" checked>
<option value="">Value 1</option>
<option value="">Value 2</option>
<option value="">Value 3</option>
</select>
<div class="input-box__spinner">
<button type="button" class="input-box__spinner__down"></button>
</div>
</div>
<!-- Disabled -->
<div class="spinner">
<select name="dropdown-menu" class="input-box input-box--dropdown-menu input-box--disabled" disabled>
<option value="">Disabled</option>
<option value="">Disabled</option>
<option value="">Disabled</option>
</select>
<div class="input-box__spinner">
<button type="button" class="input-box__spinner__down"></button>
</div>
</div>
/*------------------------------------*\
#DROPDOWN
\*------------------------------------*/
// Check Inputbox CSS
.input-box--dropdown-menu {
-moz-appearance: none;
-webkit-appearance: none;
appearance: none;
min-width: 250px;
background-color: $background-default;
}
.input-box--dropdown-menu ~ .input-box__spinner .input-box__spinner__down:after {
top: 10px;
}