Select2 - Changing fontsize of options not working when using selectionAdapter and dropdownAdapter

#1

I’m using the Select2 (4.0.8 version) plugin on one of my select dropdowns. The Select2 ‘SelectionAdapter’ and ‘DropdownAdapter’ have been introduced to change the template in order to convert the ‘Select’ into a ‘multi-select checkbox’.

However the .select2({selectionAdapter: SelectionAdapter}) is not allowing me to change the font-size of the dropdown with the below command, which works in case of no ‘selectionAdapter’.

$('#Question1').on('select2:open', function (e) {
    $('body').find('ul.select2-results__options').addClass('myFont2');
});

Is there anyway to override the Select2 adapter or incorporate the dropdown font-change within the adapters??

Full code below for reference:

jQuery(function($) {
  $.fn.select2.amd.require([
    'select2/selection/single',
    'select2/selection/placeholder',
    'select2/selection/allowClear',
    'select2/dropdown',
    'select2/dropdown/search',
    'select2/dropdown/attachBody',
    'select2/utils'
  ], function(SingleSelection, Placeholder, AllowClear, Dropdown, DropdownSearch, AttachBody, Utils) {
    var SelectionAdapter = Utils.Decorate(
      SingleSelection,
      Placeholder
    );
    SelectionAdapter = Utils.Decorate(
      SelectionAdapter,
      AllowClear
    );
    var DropdownAdapter = Utils.Decorate(
      Utils.Decorate(
        Dropdown,
        DropdownSearch
      ),
      AttachBody
    );
    var RowSelected = $('#Question1')
    $(RowSelected).select2({
      width: 'auto',
      placeholder: 'Select multiple items',
      selectionAdapter: SelectionAdapter,
      dropdownAdapter: DropdownAdapter,
      allowClear: true,
      templateResult: function(data) {

        if (!data.id) {
          return data.text;
        }

        var $res = $('<div></div>');

        $res.text(data.text);
        $res.addClass('wrap');

        return $res;
      },
      templateSelection: function(data) {
        if (!data.id) {
          return data.text;
        }
        var RowselectedNumber = ($(RowSelected).val() || []).length;
        var RowSelectedElements = $(RowSelected).val();
        var total = $('option', $(RowSelected)).length;
        return RowselectedNumber + " of " + total;
      }
    });
  });
});

$('#Question1').on('select2:open', function(e) {
  $('body').find('ul.select2-results__options').addClass('myFont2');
  $('body').find('li.select2-results__option').addClass('myFont2');
});

.myFont2 {
  font-size: 80%;
}

.select2-results__option .wrap:before {
  font-family: fontAwesome;
  color: #999;
  content: "\f096";
  width: 25px;
  height: 25px;
  padding-right: 10px;
}

.select2-results__option[aria-selected=true] .wrap:before {
  content: "\f14a";
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.0/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.8/css/select2.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.8/js/select2.min.js"></script>
<script src='https://kit.fontawesome.com/a076d05399.js'></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.10.2/css/all.css" crossorigin="anonymous">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.10.2/css/brands.css" crossorigin="anonymous">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.10.2/css/fontawesome.css" crossorigin="anonymous">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.10.2/css/regular.css" crossorigin="anonymous">

<div style="padding-bottom:2px">
  Question1
  <select id="Question1">
    <option selected id="Delhi" value="Delhi">DelhiDelhiDelhiDelhi</option>
    <option selected id="Mumbai" value="Mumbai">MumbaiMumbaiMumbaiMumbai</option>
    <option selected id="Kolkata" value="Kolkata">KolkataKolkataKolkataKolkata</option>
    <option selected id="Bengaluru" value="Bengaluru">BengaluruBengaluruBengaluruBengaluru</option>
  </select>
</div>