Укажите цвет границы на множественном выборе Select2 при нажатии - PullRequest
Новая
       13

Укажите цвет границы на множественном выборе Select2 при нажатии

0 голосов
/ 14 февраля 2019

Я хотел бы изменить цвет границы моего select2 при нажатии (onfocus).

Я пытался это сделать, но он меняет цвет границы выделения, как показано ниже.Как я могу указать цвет границы?

$('.sf-multi-select').select2({
  placeholder: 'Select or type to search',
  closeOnSelect: false,
});
.select2-search__field:focus {
  border: 1px solid #43AEA8 !important;
}

.sf-multi-select:focus {
  border: 1px solid #43AEA8 !important;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.6-rc.0/css/select2.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.6-rc.0/js/select2.min.js"></script>


<select class="sf-multi-select" placeholder="Type to search" multiple="multiple">
  <option value="17">Choce 1</option>

  <option value="16">Choice 2</option>

</select>

Ответы [ 2 ]

0 голосов
/ 14 февраля 2019

Вы можете сделать это следующим образом: 

$('.sf-multi-select').select2({
  placeholder: 'Select or type to search',
  closeOnSelect: false,
});
.select2-container--default.select2-container--focus .select2-selection--multiple {
  border: 1px solid red!important;
}

select {
  width: 100%;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.6-rc.0/css/select2.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.6-rc.0/js/select2.min.js"></script>


<select class="sf-multi-select" placeholder="Type to search" multiple="multiple">
  <option value="17">Choce 1</option>

  <option value="16">Choice 2</option>

</select>

Поэтому вместо использования :focus вы должны изменить свой собственный класс фокусировки .select2-container--default.select2-container--focus

0 голосов
/ 14 февраля 2019

Просто осмотрите элемент.Я нашел класс .select2-container--default.select2-container--focus .select2-selection--multiple.Вы можете указать цвет границы в этом классе.

...