【问题标题】：Yii2: How to change font-family of Select2 widgetYii2：如何更改 Select2 小部件的字体系列
【发布时间】：2019-07-03 00:00:05
【问题描述】：

我有一个 select2 小部件，我需要更改它的字体系列。

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

Bootstrap 没有可以更改它的类，所以我想我需要更改它的样式。

【问题讨论】：

标签： css yii2 jquery-select2-4 font-family

【解决方案1】：

当您使用Kartik Select2 并为select2 自定义Font-family 时，您需要更新添加到select2-krajee.css 文件中的以下类。如果您想更改@，它们分为两组987654324@

更改字体系列

对于占位符和选定的选项

.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。

希望对你有帮助

【讨论】：

【解决方案2】：

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

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

【讨论】：

这样，你改变了隐藏元素的样式。为什么你需要改变你看不到的东西的风格？