Блог

Главная - Вопросы по программированию - Сделайте так, чтобы у двух загрузочных тегов на входе были разные значки, чтобы удалить их

Сделайте так, чтобы у двух загрузочных тегов на входе были разные значки, чтобы удалить их

#bootstrap-tags-input

#bootstrap-tags-input

Вопрос:

Я использую 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>

Я попытался разложить его по классу, но не могу его отделить —

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

Есть какие-нибудь советы?

Ответ №1:

Необходимо разделить их с помощью идентификатора — возможно, это могло бы помочь кому-то еще

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

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