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

Question

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?

Sparteine

You could probably use css to do that, but there is no code example in the question so idk – Dippy

Answer 1

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

Ne

Answer 2

.select2-selection__choice__remove {
    float: right;
    margin-left: 5px /* I added to separate a little bit */
}

Derouen

Answer 3

You can move the x using CSS only by adding in your css-File some code like this:

  .select2-container-multi .select2-search-choice-close {
    left: auto;
    right: 3px;
  }

  .select2-container-multi .select2-choices .select2-search-choice {
    padding-right: 18px;
    padding-left: 5px;
  }

Recurvate

Answer 4

in version 4.1.0

.select2-selection__choice {
     flex-direction: row-reverse!important;
}

Tetracaine