There are no notes for this item.
<!-- Default -->
<div class="spinner">
<input type="text" list="combo-box" class="input-box input-box--combo-box input-box--">
<label for="combo-box">
<datalist id="combo-box" class="input-box input-box--combo-box input-box--default" >
<select name="combo-box" class="input-box input-box--combo-box input-box--default" >
<option value="">Value 1</option>
<option value="">Value 2</option>
<option value="">Value 3</option>
</select>
</datalist>
<div class="input-box__spinner">
<button type="button" class="input-box__spinner__down"></button>
</div>
</label>
</div>
<!-- Selected -->
<div class="spinner">
<input type="text" list="combo-box" class="input-box input-box--combo-box input-box--" checked>
<label for="combo-box">
<datalist id="combo-box" class="input-box input-box--combo-box input-box--selected" checked>
<select name="combo-box" class="input-box input-box--combo-box input-box--selected" checked>
<option value="">Value 1</option>
<option value="">Value 2</option>
<option value="">Value 3</option>
</select>
</datalist>
<div class="input-box__spinner">
<button type="button" class="input-box__spinner__down"></button>
</div>
</label>
</div>
<!-- Disabled -->
<div class="spinner">
<input type="text" list="combo-box" class="input-box input-box--combo-box input-box--" disabled>
<label for="combo-box">
<datalist id="combo-box" class="input-box input-box--combo-box input-box--disabled" disabled>
<select name="combo-box" class="input-box input-box--combo-box input-box--disabled" disabled>
<option value="">Disabled</option>
<option value="">Disabled</option>
<option value="">Disabled</option>
</select>
</datalist>
<div class="input-box__spinner">
<button type="button" class="input-box__spinner__down"></button>
</div>
</label>
</div>
/*------------------------------------*\
#COMBOBOX
\*------------------------------------*/
// Check Inputbox CSS
// Check Spinner CSS
.input-box--combo-box {
-moz-appearance: none;
-webkit-appearance: none;
appearance: none;
min-width: 250px;
background-color: $background-default;
}
.input-box--combo-box ~ .input-box__spinner .input-box__spinner__down:after {
top: 10px;
}
input.input-box--combo-box {
min-width: 238px;
}
// Safari hack. Safari does not support datalist so the user gets a normal dropdown menu.
_::-webkit-:host:not(:root:root), input.input-box--combo-box {
display: none;
}
_::-webkit-:host:not(:root:root), datalist.input-box--combo-box {
padding: 0;
border: none;
}
.input-box--combo-box ~ .input-box__spinner .input-box__spinner__down:before {
display: block;
}