Select 2 with checkbox customisation

Select 2 with checkbox customisation done by Jithin

by Jithin Raj P R

HTML

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.5/css/select2.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.5/js/select2.full.min.js"></script>
<select class="js-example-basic-single" name="state" multiple="multiple">
  <option value="AL">test</option>
  <option value="WY">test1</option>
  <option value="ww">test2</option>
  <option value="eeY">select1</option>
  <option value="tt">select2</option>
</select>

CSS

select {
  width: 100%;
}

.select2-results__option[aria-selected] {
  padding-left: 20px;
  position: relative;
}

.select2-results__option[aria-selected]:after,
.select2-results__option[aria-selected]:before {
  left: 4px;
  content: '';
  width: 10px;
  height: 10px;
  border: 1px solid;
  position: absolute;
  top: 9px;
}

.select2-results__option[aria-selected]:before {
  transform: rotate(49deg);
  width: 2px;
  height: 6px;
  left: 8px;
  top: 10px;
  border-left-color: transparent;
  border-top-color: transparent;
}

.select2-results__option[aria-selected]:before {
  transform: rotate(49deg);
  width: 0px;
  height: 0px;
  opacity: 0;
  left: 7px;
  top: 14px;
  border-left-color: transparent;
  border-top-color: transparent;
}

.select2-results__option[aria-selected=true]:before {
  animation: check 0.2s forwards;
}

@keyframes check {
  0% {
    opacity: 1;
    width: 0;
    height: 0;
    top: 14px;
    left: 7px;
  }
  50% {
    opacity: 1;
    width: 2px;
    height: 0px;
    top: 14px;
    left: 7px;
  }
  100% {
    opacity: 1;
    height: 6px;
    width: 2px;
    top: 10px;
    left: 8px;
  }
}

.select2-container--default .select2-results__option[aria-selected=true] {
  background-color: #fff;
}

.select2-container--default .select2-results__option--highlighted[aria-selected] {
  background-color: #5897fb;
}

.select2-container {
  margin-top: 24px;
}

.select2-selection--multiple[aria-expanded="true"] .select2-search.select2-search--inline {
  position: absolute;
  left: 0;
  width: 100%;
  top: 100%;
  border: 1px solid;
}

JavaScript

// In your Javascript (external .js resource or <script> tag)
$(document).ready(function() {
  $('.js-example-basic-single').select2({
    closeOnSelect: false
  });
  $('.js-example-basic-single').on("select2:close", function (event) {
  	$('#mySelect2').trigger('open.select2')
  });
});