如何修改Yii2 Kartik Select2下拉框中$model['question']的字体

你之前给options配置的style是作用于整个Select2输入框的，不是下拉列表里的单个选项内容，所以没法单独修改question的样式。要实现这个需求，我们可以通过在选项文本中嵌入HTML标签，并让Select2允许渲染HTML内容来完成，具体步骤如下：

步骤1：给Question部分添加HTML样式标签 #

在生成选项文本的时候，把$model['question']用带样式的<span>标签包裹起来，按需设置字体加粗、颜色等样式：

<?= $form->field($model, 'faqid')->widget(Select2::classname(), [ 
    'data' => \yii\helpers\ArrayHelper::map( 
        \app\models\Faq::find()->all(), 'faqid', function ($model) { 
            // 给question添加自定义样式的span标签
            return '<span style="font-weight: bolder; color: #2d3748;">' . $model['question'] . '</span> - ' . $model['answer']; 
        } 
    ), 
    'options' => [ 'placeholder' => 'Select Question' ], 
    'pluginOptions' => [ 
        'allowClear' => true,
        // 关键配置：让Select2不转义HTML内容
        'escapeMarkup' => function ($markup) {
            return $markup;
        }
    ], 
])->label('Questions - Answers'); ?>

步骤2：关键配置说明 #

• escapeMarkup：默认Select2会自动转义HTML内容来防范XSS风险，我们通过自定义这个函数直接返回原始标记，让Select2能渲染我们嵌入的<span>标签，从而实现单独修改question的样式。
• 若question内容来自用户输入（存在XSS风险），建议先对内容进行转义处理，比如使用\yii\helpers\Html::encode($model['question'])包裹内容后再添加样式标签。

这样修改后，下拉选项里的Question部分就会应用你设置的字体样式，Answer部分则保持默认样式啦。

内容的提问来源于stack exchange，提问作者Karijoatmo Sergio