Specify border colour on Select2 multi-select when clicked

Question

I would like to change the border color of my select2 on click (onfocus).

I've tried doing it but it changes the border color of the selection as seen below. How can I specify a border color?

$('.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>

Answer 1

You could do it this way :

$('.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>

So rather than using :focus, you should modify their own focus class .select2-container--default.select2-container--focus