Изменение кнопки удаления выбранного мультиселекта - PullRequest
Новая
       22

Изменение кнопки удаления выбранного мультиселекта

1 голос
/ 13 мая 2019

Есть ли способ настроить кнопку, предоставляемую плагином Chosen jQuery, который используется для удаления выбранных элементов в мульти-выборе? Очевидно, я могу просто переопределить URL-адрес изображения в CSS, но это похоже на хак.

В идеале я хотел бы иметь возможность предоставить другой класс в опциях, предоставляемых плагину, в соответствии с $('select').chosen({ multiRemoveClass: 'fa fa-remove' }). Однако эта функция не поддерживается. Итак, как лучше всего это сделать?

Вот пример кода, который скрывает кнопку, которую я бы хотел настроить: 

$('select').chosen()
select {
  width: 100%;
}

/* Removes the Chosen removal button image */
.chosen-container-multi .chosen-choices li.search-choice .search-choice-close {
  background: none !important;
}
<script
  src="https://code.jquery.com/jquery-3.4.1.min.js"
  integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo="
  crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/chosen/1.8.7/chosen.jquery.min.js"></script>
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/chosen/1.8.7/chosen.min.css" />

<select multiple>
  <option>Option 1</option>
  <option>Option 2</option>
  <option>Option 3</option>
</select>

1 Ответ

2 голосов
/ 13 мая 2019

Вы можете продолжить путь, который вы начали, и использовать псевдоэлементы для размещения вашего шрифта: 

$('select').chosen()
select {
  width: 100%;
}

/* Removes the Chosen removal button image */
.chosen-container-multi .chosen-choices li.search-choice .search-choice-close {
  background: none !important;
}

.chosen-container-multi .chosen-choices li.search-choice .search-choice-close:after {
  font-family: "Font Awesome 5 Brands", sans-serif; 
  content: "\f099";
  color: red;
  font-size: 12px;
}
<script
  src="https://code.jquery.com/jquery-3.4.1.min.js"
  integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo="
  crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/chosen/1.8.7/chosen.jquery.min.js"></script>
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/chosen/1.8.7/chosen.min.css" />

<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.2/css/all.css" integrity="sha384-oS3vJWv+0UjzBfQzYUhtDYW+Pj2yciDJxpsK1OYPAYjqT085Qq/1cq5FLXAZQ7Ay" crossorigin="anonymous">


<select multiple>
  <option>Option 1</option>
  <option>Option 2</option>
  <option>Option 3</option>
</select>
...