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

Question

我正在使用select2来显示多选组件。而不是在项目的左侧显示关闭图标（x），如何将其移动到所选项目的右侧？

Answer 1

如果您将float: right;添加到.select2-selection__choice__remove css类，则会将其设置在右侧。

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

$('.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 */
}

Answer 3

您只能通过在CSS文件中添加如下代码来使用CSS移动x：

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