Select2 Dropdown Options Do Not Update Background Color

Question

Select2 Dropdown Options Do Not Update Background Color

I am currently implementing the Select2 Input CSS/jQuery framework from to assist me in handling multi-select boxes. However, I am facing difficulty in changing the background color of the results when the select box is clicked.

To provide a better understanding, I have prepared a JS fiddle:

https://jsfiddle.net/L26bzgmf/

This is the specific select box I am working on:

<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>

When the box is clicked, I require all four tags to be displayed in white text with a background color of #333333. Subsequently, upon selection (as evidenced by the automatically selected Tag 1), I need the background color to transition to #666666, the font to remain white, and the "remove" x icon to also turn white with a hover effect of #aa0000.

I've experimented with both jQuery and CSS to achieve this outcome but so far, I haven't had any success. It's quite frustrating as their documentation was previously helpful, but now it seems perplexing. I am open to exploring alternative solutions that offer similar functionalities as Select2 for my tagging system within the blog.

This feature is being developed for implementing a "tags" system on my blog.

javascript jquery html css

Answer 1

Answer №1

Success! I cracked the code and managed to alter the styling using only CSS. No JavaScript required!

/* Dropdown/DropUp Results */
.select2-container--default .select2-results>.select2-results__options {
    background-color: #555555;
    color: #eeeeee;
}

/* Clear "X" Button */
.select2-container--default .select2-selection--multiple .select2-selection__choice__remove {
    color: #cccccc;
}

/* Hover Effect for "X" Button */
.select2-container--default .select2-selection--multiple .select2-selection__choice__remove:hover {
    color: #aa0000;
}
/* Styling for Each Result */
.select2-container--default .select2-selection--multiple .select2-selection__choice {
    background-color: #555555;
}

I attempted to update the JS Fiddle, but encountered obstacles. Here's a screenshot instead. :P

https://i.sstatic.net/kCDit.jpg

Answer 2

Success! I cracked the code and managed to alter the styling using only CSS. No JavaScript required!

/* Dropdown/DropUp Results */
.select2-container--default .select2-results>.select2-results__options {
    background-color: #555555;
    color: #eeeeee;
}

/* Clear "X" Button */
.select2-container--default .select2-selection--multiple .select2-selection__choice__remove {
    color: #cccccc;
}

/* Hover Effect for "X" Button */
.select2-container--default .select2-selection--multiple .select2-selection__choice__remove:hover {
    color: #aa0000;
}
/* Styling for Each Result */
.select2-container--default .select2-selection--multiple .select2-selection__choice {
    background-color: #555555;
}

I attempted to update the JS Fiddle, but encountered obstacles. Here's a screenshot instead. :P

https://i.sstatic.net/kCDit.jpg

Answer 3

Answer №2

When you access the browser web console, the JQuery Select2 plugin performs the following actions:

It adds a <span class="select2"> right after your .select2-multi
It generates a <span class="selection"> with an id="
```
$('span[aria-owns]', **'the span created at Step 1'**).attr('aria-owns')
```
" under the document.body and then uses position=absolute to position it on top of your <select>

If you wish to customize anything, simply explore the above two DOM trees to make the desired changes.

Below is a demonstration:

$('.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')
  })
})

<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>

Answer 4

When you access the browser web console, the JQuery Select2 plugin performs the following actions:

It adds a <span class="select2"> right after your .select2-multi
It generates a <span class="selection"> with an id="
```
$('span[aria-owns]', **'the span created at Step 1'**).attr('aria-owns')
```
" under the document.body and then uses position=absolute to position it on top of your <select>

If you wish to customize anything, simply explore the above two DOM trees to make the desired changes.

Below is a demonstration:

$('.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')
  })
})

<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>

Select2 Dropdown Options Do Not Update Background Color

Answer №1

Answer №2

Similar questions

Is it possible to save the current permissions for a channel or category in Discord.js and then restore them after a certain event occurs?

Mistakes in my async/await workflow: How am I incorrectly loading and injecting this external script?

Is there a way I can put together this CSS code?

transforming the accordion into a checkbox

Receiving the message "servlet temporarily moved" while attempting to pass serializable data through an AJAX request to a servlet

connecting parameters to functions in javascript

What is the best way to retrieve the value of a nested function in JavaScript?

Implementing event listener for component generated by mapping function

Utilizing Bootstrap 5 with either a 16 or 24 column grid system minus the need for Sass

Retrieve content from external webpage and direct it to domain.tld/?id=

Guidelines for executing a PHP script upon a button click

CSS: The sub-class functionality is not functioning as intended

Dynamically assigning values to class properties in Angular with Typescript is a powerful

When a user right-clicks to open a context menu, extract a specific cell value from a row in a dynamically generated datatable

Moment-Timezone defaults to the locale settings after the global Moment locale has been established

Remove numerous entries from the WordPress database by selecting multiple checkboxes

Achieving second class using jQuery from a choice of two

Difficulties with validating phone numbers

Z-index malfunctioning - need to troubleshoot

5 horizontal navbar with dropdown menu in Bootstrap