Select2 - 如何将关闭图标移动到所选项目的右侧

Question

我正在使用 select2 来显示多选组件。我怎样才能将它移到所选项目的右侧，而不是在项目左侧显示关闭图标 (x)？

Answer 1

如果将float: right;添加到.select2-selection__choice__removecssclass，这会将其设置在右侧。

编辑：如果您不想修改 select2 样式表，您可以随时使用 jquery 并执行如下操作：

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

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

Answer 2

您可以使用 CSS 移动 x，只需在您的 css-File 中添加如下代码：

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

Answer 3

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

Select2 - 如何将关闭图标移动到所选项目的右侧

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

jquery-select2