Search code examples
jquery-select2

Select2 - How to move the close icon to the right of the selected item

I am using select2 for displaying a multiple selection component. Instead of showing the close icon(x) to the left of the item, how can I move it to the right of the selected item?

Solution

  • If you add float: right; to the .select2-selection__choice__remove css class, this will set it on the right side.

    EDIT: If you don't want to touch the select2 stylesheets, you can always use jquery and do something like this:

    $('.select2').on('select2:open', function () {
  $('.select2-selection__choice__remove').addClass('select2-remove-right');
});

    .select2-remove-right {
  float: right;
}