【问题标题】: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'],
      ]) ?>
      

      【讨论】:

      • 这样,你改变了隐藏元素的样式。为什么你需要改变你看不到的东西的风格?
      猜你喜欢
      • 1970-01-01
      • 1970-01-01
      • 2011-05-03
      • 2016-07-14
      • 1970-01-01
      • 1970-01-01
      • 2019-10-19
      • 1970-01-01
      • 2011-05-26
      相关资源
      最近更新 更多