如何使用 css 更改 select2 控件的字体颜色

Question

我正在使用以下 HTML 代码在我的表单中包含一个 select2 控件，如下所示。

<select id="element_id" class="select2" style="width:100%">
<option value="e1" >Element 1</option>
<option value="e2" >Element 2</option>
<option value="e3" >Element 3</option>
</select>

我正在使用以下样式来格式化列表项和 selected 项的字体。

<style>
    #s2id_element_id .select2-container--default .select2-selection--single .select2-selection__rendered 
    {
        color: green ;
    }
</style>

这不会将列表项和 selected 项着色为绿色。注意：我只需要这个特定的 select 框来拥有样式，而不是其他的。所以我使用 css id selector 用于特定的 select2 控制。

谢谢。

Answer 1

这是您需要用于设置 select2 输入样式的类列表：

/* Input field */
.select2-selection__rendered {  }
    
/* Around the search field */
.select2-search {  }
    
/* Search field */
.select2-search input {  }
    
/* Each result */
.select2-results {  }
    
/* Higlighted (hover) result */
.select2-results__option--highlighted {  }
    
/* Selected option */
.select2-results__option[aria-selected=true] {  }

如果你愿意，可以在我创建的这个 JSBin 中玩耍，这样你就可以测试一下。

I've updated my JSBin, in it you can see how you can style a specific select2 list (instead of globally adding styles)

Answer 2

.select2-results .select2-highlighted {
    background: #3ea211;
}

试试这个css它会很好

Answer 3

.select2-container--default .select2-results__option--highlighted[aria-selected] {
   background-color: #5897fb !important;
   color: white;
}

试试这个

Answer 4

<select id="listcolors" name="color[]" class="js-example-placeholder-multiple js-states form-control"
                multiple="multiple">

    @foreach ($colors as $item)
        <option value="{{ $item->id }}" title="{{ $item->color_code }}">{{ $item->color_name }}
        </option>
    @endforeach

</select>

<script>
                
    function formatState(state) {
        if (!state.id) {
            return state.text;
        }
        var $state = $(
            '<span><img width="10" height="10" style="background-color:' + state.element.title + ';"  /> ' + state
                        .text + '</span>'

        );
        return $state;
    };

    $("#listcolors").select2({
        templateResult: formatState,
        placeholder: "Choisir une couleur"
    });
</script>

Answer 5

$("#select2-**element_id**-container").css('color','green');

如何使用 css 更改 select2 控件的字体颜色

How to change font color of select2 control using css

html

css

select2

这是您需要用于设置 select2 输入样式的类列表：

如何使用 css 更改 select2 控件的字体颜色

How to change font color of select2 control using css

html

css

select2

这是您需要用于设置 select2 输入样式的 类 列表：

这是您需要用于设置 select2 输入样式的类列表：