• HTML
• CSS
• JS

HTML

<script type="module" src="https://unpkg.com/ionicons@5.5.2/dist/ionicons/ionicons.esm.js"></script>

<div class="wrapper">
  <div class="select_wrap">
    <ul class="default_option">
      <li>
        <div class="option">
          <p>
            <span class="count"> 0
            </span>
            <span class="text"> Select
            </span>
          </p>
          <span class="icon">
            <ion-icon class="i" name="chevron-down-outline"></ion-icon>
          </span>
        </div>
      </li>
    </ul>
    <ul class="select_ul">
      <li>
        <div class="option">
          <input type="checkbox" class="input" id="cb1">
          <span class="checkmark"></span>
          <span class="text">Travel</span>
        </div>
      </li>
      <li>
        <div class="option">
          <input type="checkbox" class="input" id="cb2">
          <span class="checkmark"></span>
          <span class="text">Food</span>
        </div>
      </li>
      <li>
        <div class="option">
          <input type="checkbox" class="input" id="cb3">
          <span class="checkmark"></span>
          <span class="text">Network</span>
        </div>
      </li>
      <li>
        <div class="option">
          <input type="checkbox" class="input" id="cb4">
          <span class="checkmark"></span>
          <span class="text">Education</span>
        </div>
      </li>
      <li>
        <div class="option">
          <input type="checkbox" class="input" id="cb5">
          <span class="checkmark"></span>
          <span class="text">Private</span>
        </div>
      </li>
      <li>
        <div class="option">
          <input type="checkbox" class="input" id="cb6">
          <span class="checkmark"></span>
          <span class="text">Government</span>
        </div>
      </li>
      <li>
        <div class="option">
          <input type="checkbox" class="input" id="cb7">
          <span class="checkmark"></span>
          <span class="text">Others</span>
        </div>
      </li>
    </ul>
  </div>
</div>

CSS

@import url("https://fonts.googleapis.com/css2?family=Roboto&display=swap");

:root {
  --bg-clr: #7e6ee1;
  --text-clr: #000;
  --primary-clr: #63d36b;
  --secondary-clr: #e4fee7;
  --white: #fff;
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  list-style: none;
  font-family: "Roboto", sans-serif;
  user-select: none;
}

body {
  background: var(--bg-clr);
  color: var(--text-clr);
  font-size: 14px;
  display: flex;
  justify-content: center;
  margin-top: 30px;
}

.select_wrap .default_option li .option {
  display: flex;
  align-items: center;
  padding: 10px 20px;
  background: var(--white);
  width: 200px;
  height: 45px;
  border-radius: 3px;
  position: relative;
  cursor: pointer;
  margin-bottom: 15px;
  transition: 0.5s ease;
}

.select_wrap .default_option li .option .count {
  font-weight: bold;
  font-size: 15px;
  display: none;
}

.select_wrap .default_option li .option .icon {
  position: absolute;
  top: 10px;
  right: 20px;
  color: var(--primary-clr);
  font-size: 14px;
  width: 25px;
  height: 25px;
  background: var(--secondary-clr);
  border-radius: 50%;
  line-height: 30px;
  text-align: center;
  transition: 0.5s ease;
}

.select_wrap .select_ul {
  background: var(--white);
  border-radius: 3px;
  width: 200px;
  display: none;
}

.select_wrap .select_ul li .option {
  display: flex;
  align-items: center;
  padding: 10px 20px;
  padding-left: 50px;
  width: 100%;
  height: 40px;
  position: relative;
  cursor: pointer;
  transition: 0.5s ease;
}

.select_wrap .select_ul li:last-child .option {
  margin-bottom: 0;
}

.select_wrap .select_ul li .option:hover {
  background: var(--secondary-clr);
}

.select_wrap .select_ul li:first-child .option {
  border-top-left-radius: 3px;
  border-top-right-radius: 3px;
}

.select_wrap .select_ul li:last-child .option {
  border-bottom-left-radius: 3px;
  border-bottom-right-radius: 3px;
}

.select_wrap .select_ul li .option .input {
  opacity: 0;
  position: absolute;
  top: 0;
  left: 0;
}

.select_wrap .select_ul li .option .checkmark {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  left: 20px;
  width: 20px;
  height: 20px;
  border: 1px solid var(--primary-clr);
  border-radius: 3px;
  transition: 0.5s ease;
}

.select_wrap .select_ul li .option .checkmark:before {
  content: "";
  position: absolute;
  top: -1px;
  left: -1px;
  width: 21px;
  height: 21px;
  background: var(--primary-clr);
  border-radius: 3px;
  display: none;
}

.select_wrap .select_ul li .option .checkmark:after {
  content: "";
  position: absolute;
  top: 5px;
  left: 4px;
  width: 7px;
  height: 2px;
  border: 2px solid;
  border-color: transparent transparent var(--white) var(--white);
  transform: rotate(-45deg);
  display: none;
}

.select_wrap .default_option.active + .select_ul {
  display: block;
}

.select_wrap .default_option.active .option,
.select_wrap .default_option .option:hover{
 background: var(--primary-clr);
  color: var(--white);
}

.select_wrap .default_option.active .option .icon{
  transform: rotate(180deg);
}


.select_wrap .select_ul li .option .input:checked ~ .checkmark:before,
.select_wrap .select_ul li .option .input:checked ~ .checkmark:after {
  display: block;
}

.select_wrap .select_ul li .option.active .text{
  color: var(--primary-clr);
}

JS

var default_option_item = document.querySelector(".default_option .option");

var default_option_text = document.querySelector(".default_option .text");
var default_option_count = document.querySelector(".default_option .count");

var select_ul_item = document.querySelectorAll(".select_ul .option");

var input_items = document.querySelectorAll(".select_ul .input");

default_option_item.addEventListener("click", function () {
  this.closest(".default_option").classList.toggle("active");
});

select_ul_item.forEach(function (item) {
  item.addEventListener("click", function (event) {
    item.classList.toggle("active");

    if (item.classList.contains("active")) {
      item.children[0].checked = true;
    } else {
      item.children[0].checked = false;
    }

    var count = 0;
    input_items.forEach(function (input_item) {
      if (input_item.checked === true) {
        count++;
        default_option_count.style.display = "inline-block";
        default_option_count.textContent = count;
        default_option_text.textContent = "Items Selected";
      } else if (input_item.checked === false && count === 0) {
        default_option_count.style.display = "none";
        default_option_count.textContent = "";
        default_option_text.textContent = "Select";
      }
    });
  });
});

/* All credits to: https://www.youtube.com/watch?v=1cRMxbE5ZFE */