Question

我正在使用Select2输入CSS / jQuery框架（https://select2.org/）来帮助我选择多选框。单击时，我无法更改选择框结果的背景。

我为你们提供了一个JS小提琴，让你们更好地理解。

这是我正在处理的选择框：

<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，并将字体变为白色，并且＆＃34;删除＆＃34; x为白色，悬停时需转为#aa0000。

我尝试过使用jQuery，我尝试过使用CSS ......我似乎无法让它们改变。完全没有。它很烦人。他们的文档过去相当不错，但现在它只是...我无法弄明白。为此，我也会选择类似于Select2的替代选项。

我正在创建一个＆＃34;标签＆＃34;我的博客系统。

Answer 1

我想出了答案！这是我的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小提琴，但它没有工作......所以这里是截图。：P

https://imgur.com/a/LVYszsf

Answer 2

如果您打开浏览器Web控制台，您会发现JQuery Select2插件在以下内容中执行：

在<span class="select2">

.select2-multi

在document.body下创建一个{id =＆＃34; <span class="selection">＆＃34;的$('span[aria-owns]', **'the span created at Step 1'**).attr('aria-owns')，然后使用position = absolute将其置于<select>

如果你想定制一些东西，只需看看上面两个Dom树就可以做你喜欢的事了。

以下是一个演示：

＆＃13;

$('.select2-multi').select2()
let select2Obj = $('.select2-multi+.select2')
$('span', select2Obj).css('background-color', '#666666')
$('.select2-multi').on('select2:open', function () {
  setTimeout(()=>{//some elements will be created after open, so have to use setTimeout
    let select2Obj = $('.select2-multi+.select2')
    //change the background-color for select
    //you can uncomment below codes to see its structure
    //console.log($('.select2-container').html())
    //below change the background color for all options
    $('#'+$('span[aria-owns]', select2Obj).attr('aria-owns'))
      .find('li')
      .css('background-color', '#333333')
    //below change the font color for all options
    $('#'+$('span[aria-owns]', select2Obj).attr('aria-owns'))
      .find('li')
      .css('color', 'white')
    $('#'+$('span[aria-owns]', select2Obj).attr('aria-owns'))
      .find('li')
      .hover(function(){
        $(this).css('color', 'black')
      }, function() {
          $(this).css('color', 'white')
        }
      )

    //below change the font color for the selected option
    $('#'+$('span[aria-owns]', select2Obj).attr('aria-owns'))
      .find('li[aria-selected=true]')
      .css('color', 'red')
    //below change the font color for <select>
    $('>span>span>span', select2Obj).css('color', 'blue')
    //below change the background color for the arrow of <select>
    $('>span .select2-selection__arrow', select2Obj).css('background-color', 'red')
    },0)
})

//customize the tags
$('.select2-multi').on('change', function () {
  $('ul li span', select2Obj).css('color', 'white')
  $('ul li', select2Obj).css('color', 'white')
  $('ul li', select2Obj).css('background-color', 'gray')
  $('ul li', select2Obj).hover(function(){
    $(this).css('background-color', '#aa0000')
  },function(){
    $(this).css('background-color', 'gray')
  })
})

＆＃13;

<link href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.6-rc.0/css/select2.min.css" rel="stylesheet" />
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css" integrity="sha384-9gVQ4dYFwwWSjIDZnLEWnxCjeSWFphJiwGPXr1jddIhOegiu1FwO5qRGvFXOdJZ4" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.1.0.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.6-rc.0/js/select2.min.js"></script>
<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>

＆＃13;

选择2输入框结果不更改背景颜色

2 个答案: