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

【问题标题】：How to change font color of select2 control using css如何使用css更改select2控件的字体颜色
【发布时间】：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。

标签： html css select2

【解决方案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 width="10" height="10" 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');

【讨论】：