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>