Yii2: Как изменить семейство шрифтов виджета Select2

Question

У меня есть select2 виджет, и мне нужно изменить его семейство шрифтов.

<?= $form->field($model, 'my_number')
    ->widget(Select2::classname(), [
        'items' => ['One' => 'One', 'Two' => 'Two', 'Three' => 'Three'],
        'class' => 'form-control',
]) ?>

Bootstrap не имеет класса, чтобы изменить его, поэтому я думаю, что мне нужно изменитьего стиль.

Answer 1

Поскольку вы используете Kartik Select2 и для настройки Font-family для select2, вам необходимо обновить следующие классы, добавленные в файл select2-krajee.css. Они делятся на 2 группы, если выхотите изменить font-family

Изменение семейства шрифтов

Для заполнителя и выбранной опции

.select2-container--krajee .select2-selection{
   font-family:Roboto, sans-serif !important;
}

Для раскрывающихся опций

.select2-container--krajee .select2-results__option{
   font-family:Roboto, sans-serif !important;
}

Изменение цвета / размера шрифта

Для выбранного параметра

.select2-container--krajee .select2-selection--single .select2-selection__rendered{
    color:red !important;
}

Для заполнителя по умолчанию

.select2-container--krajee .select2-selection--single .select2-selection__placeholder{
    color:red !important;
}

Для изменения цвета для параметра раскрывающегося списка того же классаиспользуется, что указано для опции font-family в первом разделе сверху, то есть .select2-container--krajee .select2-results__option.

Надеюсь, это поможет

Answer 2

Вы можете добавить стиль к нему следующим образом:

<?= $form->field($model, 'my_number')
->widget(Select2::classname(), [
    'items' => ['One' => 'One', 'Two' => 'Two', 'Three' => 'Three'],
    'class' => 'form-control',
    'options' => ['style' => 'font:yourfontfamilly'],
]) ?>