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

【问题标题】：Select2 - How to move the close icon to the right of the selected itemSelect2 - 如何将关闭图标移动到所选项目的右侧
【发布时间】：2016-08-12 14:43:22
【问题描述】：

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

【问题讨论】：

您可能会使用 css 来做到这一点，但问题中没有代码示例，所以 idk

标签： jquery-select2

【解决方案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;
}

【讨论】：

【解决方案2】：

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

【讨论】：

【解决方案3】：

您只能使用 CSS 移动 x，方法是在您的 css 文件中添加如下代码：

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

【讨论】：