如何调整Select2下拉框中特定选项的字体大小？内嵌样式不生效

嗨，我之前也碰到过这个问题！你直接给原生<option>标签加style="font-size:40px;"没用的原因是：Select2会把原生的下拉框隐藏，然后生成一套自己的DOM结构来渲染选项，原生option的样式不会被自动继承到新生成的元素上。下面给你两种靠谱的解决方案：

方案一：用CSS直接定位Select2生成的元素 #

这种方法适合静态样式的场景，简单直接。

步骤1：给目标option加自定义class #

先给需要放大的<option>加个class，方便后续CSS定位：

<option value="501" class="main-option" disabled>Main option</option>

步骤2：编写CSS覆盖Select2样式 #

Select2生成的选项元素会继承原生option的class，所以直接针对这个class写样式就行：

/* 下拉列表中的目标选项 */
.select2-results__option.main-option {
    font-size: 40px;
}

/* 如果需要调整选中状态的样式（你的选项是disabled的，可能用不上，但可以留着备用） */
.select2-selection__rendered .main-option {
    font-size: 40px;
}

如果不想加class，也可以通过选项的value属性来定位：

.select2-results__option[data-value="501"] {
    font-size: 40px;
}

方案二：用Select2的模板功能自定义渲染 #

如果需要动态控制样式（比如根据不同条件调整字体大小），这个方法更灵活。

修改你的Select2初始化代码，使用templateResult和templateSelection选项来自定义选项的渲染：

$(document).ready(function() {
    $('.sele').select2({
        // 自定义下拉列表中选项的渲染
        templateResult: function(option) {
            // 跳过默认的占位符选项
            if (!option.id) {
                return option.text;
            }
            // 判断是否是目标选项，设置对应样式
            if (option.value === '501') {
                return $('<span style="font-size:40px;">' + option.text + '</span>');
            }
            // 其他选项正常渲染
            return option.text;
        },
        // 自定义选中状态的渲染（你的选项是disabled的，可根据需求调整）
        templateSelection: function(option) {
            if (option.value === '501') {
                return $('<span style="font-size:40px;">' + option.text + '</span>');
            }
            return option.text;
        }
    });
});

额外提醒：修正你的脚本顺序 #

你的代码里还有个小问题：jQuery必须在Select2之前引入，不然会出现$ is not defined的错误。正确的顺序应该是：

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.12/js/select2.full.min.js"></script>
<script>
$(document).ready(function() {
    $('.sele').select2();
});
</script>

内容的提问来源于stack exchange，提问作者Abdallah Sakre