bootstrap-tags-input - 使两个引导标签输入具有不同的图标以将其删除

Question

我正在使用引导标签输入（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>

我试图按班级将其分层，但无法将其分开-

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

有什么建议吗？

标签： bootstrap-tags-input

Answer 1

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

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

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