选择2，多个选择标签，更改模板而不修改核心

Question

我正在使用Select2作为标签。该插件将×作为原始X预先删除标签。我真的不喜欢这个，我想用我的一个图标<i class="icon icon-remove"></i>代替这个。不幸的是在文档中我找不到有关如何覆盖此行为的任何信息。

例如，您可以使用templateSelection来更改标签的呈现方式，但插件仍然会预设时间图标（我想要的功能，只是使用不同的样式）。

有没有办法在不更改核心文件的情况下修改模板？如果是这样，有人能为我提供一个简单的例子吗？

我在这里找到它：

  MultipleSelection.prototype.selectionContainer = function () {
    var $container = $(
      '<li class="select2-selection__choice">' +
        '<span class="select2-selection__choice__remove" role="presentation">' +
          '&times;' +
        '</span>' +
      '</li>'
    );

    return $container;
  };

顺便说一下，我正在使用Select2 4。

Answer 1

如果您无法更改模板。你可以用CSS简单的风格。

你可以给.select2-selection__choice__remove {font-size: 0}并在.select2-selection__choice__remove:after选择器上添加你的自定义图标。