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

Posted 2023-05-07

【中文标题】如何使用css更改select2控件的字体颜色

【英文标题】：How to change font color of select2 control using css

【发布时间】：2017-04-06 11:49:00

【问题描述】：

我正在使用以下 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>

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

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

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

谢谢。

【问题讨论】：

这不是印刷错误，我也尝试了 element_id 和 s2id_element_id。

【参考方案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 中玩耍，这样您就可以进行测试。

我已经更新了我的 JSBin，在其中你可以看到如何设置特定 select2 列表的样式（而不是全局添加样式）

【讨论】：

我希望这是您正在寻找的答案（也许还有更多）。如果不是，我很乐意提供更多信息。

嗨 Mihailo，感谢您的努力。我想要的是在选择器中使用 element_id 包含一个额外的选择器。我只需要为特定的 select2 控件着色，但不需要为表单中的所有 select2 控件着色。只有这个特定的控件需要着色。所以我尝试将 id 选择器作为列表中的第一个，但没有奏效。我尝试了#s2id_element_id 和#element_id，但没有成功。

例如，我希望下面的内容能够准确过滤我的特定选择 2 控件 #element_id .select2-selection__rendered background-color: yellow;

啊，抱歉没有正确解释您的问题。我已经更新了 JSBin 代码，用于使用给定的 ID 设置 specific select2 的样式。希望对您有用。

@WajiraWeerasinghe 哈哈哈，你是我两周前穿过的传奇人物 xD 很高兴我能帮到你。 :]

【参考方案2】：

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

试试这个css，它会正常工作

【参考方案3】：

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

试试这个

【参考方案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   style="background-color:' + state.element.title + ';"  /> ' + state
                        .text + '</span>'

        );
        return $state;
    ;

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

【参考方案5】：

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