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?

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

Answer 2

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