● Select2のドロップダウンの文字サイズを変更する

.select2 {
    font-size: 12px;
}
.select2-results__option {
    font-size: 12px;
}
.select2-container--default .select2-selection--single .select2-selection__rendered {
   line-height: 1.5 !important;
}

● Select2のボックスの高さを変更する （すべての select2 の高さを変更）

.select2-selection__rendered {
    line-height: 28px !important;
}
.select2-container .select2-selection--single {
    height: 32px !important;
}
.select2-selection__arrow {
    height: 31px !important;
}

● Select2のボックスの高さを変更する （指定したselect2 の高さを変更）

#my-select+.select2-selection__rendered {
    line-height: 25px !important;
}
#my-select+.select2-container .select2-selection--single {
    height: 29px !important;
}
#my-select+.select2-selection__arrow {
    height: 28px !important;
}

● Select2のドロップダウンのリストの高さを変更する

.select2-results , .select2-results__options {
    max-height: 500px !important;
    height: 500px !important;
}

● Select2のドロップダウンリストの好きな位置にhtmlタグを設定する

function formatState (state) {
  if (!state.id) {
    return state.text;
  }
  var baseUrl = "/user/pages/images/flags";
  var $state = $(
    '<span><img src="' + baseUrl + '/' + state.element.value.toLowerCase() + '.png" class="img-flag" /> ' + state.text + '</span>'
  );
  return $state;
};

$(".js-example-templating").select2({
  templateResult: formatState
});