Combo box

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>

  • Content:
    /*------------------------------------*\
        #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;
    }
    
  • URL: /components/raw/combobox/combobox.scss
  • Filesystem Path: components/03-molecules/02-combobox/combobox.scss
  • Size: 819 Bytes