Select
Темное на светлом
Неактивный
Активный
Выключенный
Светлое на темном
Неактивный
Активный
Выключенный
<div class="sf-form-select">
<select class="sf-form-control" id="select-1">
<option value="0">Выпадающий список</option>
<option value="1">Пункт 1</option>
<option value="2">Пункт 2</option>
<option value="3">Пункт 3</option>
</select>
<label for="select-1">Выпадающий список</label>
</div>Размер списка
<div class="sf-form-select">
<select class="sf-form-control sf-form-control-lg" id="select-1-lg">
<option value="0">Большой список</option>
<option value="1">Пункт 1</option>
<option value="2">Пункт 2</option>
<option value="3">Пункт 3</option>
</select>
<label for="select-1-lg">Большой список</label>
</div>
<div class="sf-form-select">
<select class="sf-form-control" id="select-1-md">
<option value="0">Нормальный список</option>
<option value="1">Пункт 1</option>
<option value="2">Пункт 2</option>
<option value="3">Пункт 3</option>
</select>
<label for="select-1-md">Нормальный список</label>
</div>
<div class="sf-form-select">
<select class="sf-form-control sf-form-control-sm" id="select-1-sm">
<option value="0">Маленький список</option>
<option value="1">Пункт 1</option>
<option value="2">Пункт 2</option>
<option value="3">Пункт 3</option>
</select>
<label for="select-1-sm">Маленький список</label>
</div>Цветовая схема
Темное на светлом
Светлое на темном
<div class="sf-form-select form-default">
<select class="sf-form-control" id="select-1-color">
<option value="0">Color Default</option>
<option value="1">Пункт 1</option>
</select>
<label for="select-1-color">Color Default</label>
</div>
<div class="sf-form-select form-primary">
<select class="sf-form-control" id="select-2-color">
<option value="0">Color Primary</option>
<option value="1">Пункт 1</option>
</select>
<label for="select-2-color">Color Primary</label>
</div>
<div class="sf-form-select form-secondary">
<select class="sf-form-control" id="select-3-color">
<option value="0">Color Secondary</option>
<option value="1">Пункт 1</option>
</select>
<label for="select-3-color">Color Secondary</label>
</div>
<div class="sf-form-select form-success">
<select class="sf-form-control" id="select-4-color">
<option value="0">Color Success</option>
<option value="1">Пункт 1</option>
</select>
<label for="select-4-color">Color Success</label>
</div>
<div class="sf-form-select form-info">
<select class="sf-form-control" id="select-5-color">
<option value="0">Color Info</option>
<option value="1">Пункт 1</option>
</select>
<label for="select-5-color">Color Info</label>
</div>
<div class="sf-form-select form-warning">
<select class="sf-form-control" id="select-6-color">
<option value="0">Color Warning</option>
<option value="1">Пункт 1</option>
</select>
<label for="select-6-color">Color Warning</label>
</div>
<div class="sf-form-select form-danger">
<select class="sf-form-control" id="select-7-color">
<option value="0">Color Danger</option>
<option value="1">Пункт 1</option>
</select>
<label for="select-7-color">Color Danger</label>
</div>