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

您可以像下面这样添加样式：

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

Answer 2

在使用Kartik Select2并为select2自定义Font-family时，您需要更新select2-krajee.css文件中添加的以下类。如果您想要更改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。

希望有帮助