单击时在Select2多重选择上指定边框颜色

Question

我想更改 jQuery("form.woocommerce-checkout button").on('click', function (e) { var payment_method = jQuery('form.checkout').find('input[name^="payment_method"]:checked').val(); if(payment_method=='custom_gateway'){ //do the submission } else{ jQuery("form.woocommerce-checkout").trigger('submit'); } 的点击（自动对焦）的边框颜色。

我已经尝试过这样做，但是它会更改所选内容的边框颜色，如下所示。如何指定边框颜色？

select2

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

Answer 1

您可以这样操作：

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

Answer 2

只需检查元素。我找到了n=5类。您可以在该类中指定边框颜色。