Select2聚焦元素CSS修改失效：点击聚焦元素背景变黄无效果

嘿，我懂你碰到的麻烦了！你直接给原生input设置背景色没效果，核心原因是Select2会把原生的input元素隐藏起来，用户实际看到和交互的是Select2生成的自定义DOM结构，所以你的JS代码操作的是被隐藏的原生元素，自然看不到变化。

下面给你两种可行的解决方案：

方案一：纯CSS实现（推荐） #

Select2在元素聚焦时，会给它的容器添加一个select2-container--focus类，我们直接针对这个类写CSS样式就行，比JS更简洁高效：

/* 针对单选Select2 */
.select2-container--focus .select2-selection--single {
    background-color: yellow !important;
}

/* 如果是多选Select2，用这个选择器 */
.select2-container--focus .select2-selection--multiple {
    background-color: yellow !important;
}

加!important是因为Select2自带的内联样式优先级较高，需要强制覆盖它的默认样式。

方案二：修改JS事件代码 #

如果你一定要用JS事件来实现，那得找到Select2生成的实际可见元素，而不是原生input。调整后的代码如下：

input.on("select2-focus", function() {
    console.log('FOCUSING');
    // 找到Select2生成的容器，再定位到选择区域元素
    $(this).next('.select2-container').find('.select2-selection').css('background-color', 'yellow');
});

这里通过next('.select2-container')找到原生input旁边的Select2容器，再用find('.select2-selection')定位到实际显示的选择区域，这样设置样式就能看到效果了。

内容的提问来源于stack exchange，提问作者Malmisteen Preeti