我正在使用Select2 Input CSS / jQuery框架(https://select2.org/)来帮助我处理多重选择框。单击时,我无法更改选择框结果的背景。
我提供了一个JS小提琴供大家理解。
https://jsfiddle.net/L26bzgmf/
这是我正在处理的选择框:
<select class="form-control select2-multi" name="tags" multiple="multiple">
<option value="1">Tag 1</option>
<option value="2">Tag 2</option>
<option value="3">Tag 3</option>
<option value="4">Tag 4</option>
</select>
单击此框后,我需要四个标签以白色文本显示,背景为#333333。然后,如通过自动选择的标签1看到的那样选择结果后,我需要将背景颜色从灰色更改为#666666,将字体更改为白色,将“删除” x更改为白色并将其悬停需要转到#aa0000。
我试过使用jQuery,我试过使用CSS ...我似乎无法让它们进行更改。完全没有它很烦人。他们的文档过去非常好,但是现在...我无法弄清楚。我也为此目的选择类似于Select2的替代选项。
我正在为我的博客创建一个“标签”系统。
最佳答案
我想出了答案!这是我的CSS代码,允许我更改其样式。我知道我只能使用CSS做到这一点,并且不需要任何类型的javascript。
/* Results "Dropdown/DropUp" */
.select2-container--default .select2-results>.select2-results__options {
background-color: #555555;
color: #eeeeee;
}
/* Clear "X" */
.select2-container--default .select2-selection--multiple .select2-selection__choice__remove {
color: #cccccc;
}
/* Clear "X" Hover */
.select2-container--default .select2-selection--multiple .select2-selection__choice__remove:hover {
color: #aa0000;
}
/* Each Result */
.select2-container--default .select2-selection--multiple .select2-selection__choice {
background-color: #555555;
}
我也尝试更新JS Fiddle,但是它没有用...所以这里是屏幕截图。 :P
https://imgur.com/a/LVYszsf