如何使用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>

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

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

这不会将列表项和所选项目以绿色着色.注意:我只需要这个特定的选择框来拥有样式而不是其他.所以我使用css id选择器进行特定的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中玩,所以你可以测试一下.

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