如何使用CSS更改select2控件的字体颜色 [英] How to change font color of select2 control using css

问题描述

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

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

<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>

这不会以绿色为列表项和所选项目上色. 注意:我只需要这个特定的选择框来具有样式，而没有其他选择框.因此，我将css id选择器用于特定的select2控件.

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.

谢谢.

推荐答案

以下是用于样式化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 中玩转，因此您可以进行测试.

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

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

这篇关于如何使用CSS更改select2控件的字体颜色的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！