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

I am using the following HTML code to include a select2 control in my form as below.

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

I am using the following style to format the font of the list items and selected item.

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

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

This does not color the list items and selected item in green color. Note: I only need this specific select box to have the style but not others. So I am using the css id selector for specific select2 control.

这不会使列表项和所选项目以绿色着色。注意:我只需要这个特定的选择框来拥有样式而不是其他。所以我使用css id选择器进行特定的select2控制。

Thanks.

3 个解决方案

#1

Here's a list of classes you need to use for styling select2 input:

/* 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] {  }

If you want you can play around in this JSBin I've created, so you can test things out.

如果你想要你可以在我创建的这个JSBin中玩,那么你可以测试一下。

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

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

#2

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

try this css its will work fine

试试这个css它会工作正常

#3

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

try this