使两个 bootstrap 标签输入具有不同的图标以将其删除

Question

我正在使用 bootstrap tagsinput (https://bootstrap-tagsinput.github.io/bootstrap-tagsinput/examples/) 从用户那里收集关键词。我有两个关键词框，想更改每个词旁边的图标。 css 经验有限。

代码：

var elt = $('#collection');
elt.tagsinput({ itemValue: 'id', itemText: 'text' });
var elt = $('#suggestions');
elt.tagsinput({ itemValue: 'id', itemText: 'text' });

    .bootstrap-tagsinput .tag [data-role="remove"]:after {
        content: "x";
    }

<div class="col-sm-12">
  <div class="row">
    <!-- Keyword Collection -->
    <div class="form-group col-sm-6">
      <label for="name2" class="control-label">Your Keywords</label>
      <div>
        <input id="collection" type="text" name="keywords" />
      </div>
    </div>
    <!-- Suggestions -->
    <div class="form-group col-sm-6">
      <label for="name2" class="control-label">Keyword Suggestions</label>
      <div class="keyword">
        <input class="suggestions" type="text" id="suggestions" />
      </div>
    </div>
  </div>
</div>

我试图用 class 分层，但无法将其分开 -

.keyword .suggestions .bootstrap-tagsinput .tag [data-role="remove"]:after {
  content: "+";
}

有什么建议吗？

Answer 1

需要用 id 将它们分开 - 也许这可以帮助其他人

  #keyword_inputs .bootstrap-tagsinput .tag [data-role="remove"]:after{
      content: "  x";
  }

  #keyword_suggestions .bootstrap-tagsinput .tag [data-role="remove"]:after{
      content: "  +";
  }

使两个 bootstrap 标签输入具有不同的图标以将其删除

Make two bootstrap tagsinputs have different icons to remove them

bootstrap-tags-input