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

新手上路,请多包涵

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

谢谢。

原文由 Wajira Weerasinghe 发布,翻译遵循 CC BY-SA 4.0 许可协议

阅读 868
2 个回答

以下是您需要用于设置 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 发布,翻译遵循 CC BY-SA 4.0 许可协议

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

试试这个 css 它会工作正常

原文由 Dhaval Rajpara 发布,翻译遵循 CC BY-SA 3.0 许可协议

撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
推荐问题