如何更改每个select2选项的背景？
如何更改每个select2选项的背景？
提问于 2020-09-29 04:50:59
我使用select2作为下拉选择框，并尝试更改选项的背景色。每个选项都会有单独的颜色。我尝试过在选项中添加一个style属性，但似乎不起作用。
<select class="js-example-basic-multiple form-control" id="select-tags" name="usertags" multiple="multiple">
{% for tag in userTags %}
<option value="{{ tag }}" data-id="{{ tag.color }}" style="background-color:{{ tag.color }}" class="options">{{ tag }}</option>
{% endfor %}
</select>
$('.js-example-basic-multiple').select2();回答 1
Stack Overflow用户
回答已采纳
发布于 2020-09-29 05:09:49
将背景颜色添加到<select>中的<option>元素是不起作用的，因为这些元素最终会被隐藏。Select2隐藏了原始的<select>，然后生成自己的元素来生成一个样式为“伪”的选择控件，该控件反映了隐藏的“真实”选择控件的值。
由于select2不提供将颜色值传递给各个选项的API，因此您需要尝试使用CSS中的nth-child()选择器或一些额外的javascript来设置select2创建的假选项元素的样式。Here's a question from 2018 with answers demonstrating each approach.
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/64109452
复制相关文章
相似问题
腾讯云开发者
