Coder Wrap provides free to use snippets

/*Typeo CSS*/
* {
 padding: 0;
 margin: 0;
 box-sizing: border-box;
}

body {
 background: #edeeff;
 height: 100vh;
 display: flex;
 justify-content: center;
 align-items: center
}

.custom-slt * {
 font-family: Verdana, Arial, Helvetica, sans-serif;
}

/*Typeo CSS*/
.custom-slt {
 position: relative;
 margin: 0 auto;
 width: 400px;
}

.custom-slt .select {
 position: relative;
 background: #ffffff;
 border: 1px solid #bac2c7;
 height: 60px;
 border-radius: 4px;
}

.custom-slt .select::after {
 position: absolute;
 content: "";
 width: 8px;
 height: 8px;
 top: calc(50% - 2px);
 right: 15px;
 transform: translateY(-50%) rotate(45deg);
 border-bottom: 2px solid #000;
 border-right: 2px solid #000;
 cursor: pointer;
 transition: border-color 0.4s;
}

.custom-slt.active .select::after {
 border: none;
 border-left: 2px solid #000;
 border-top: 2px solid #000;
 top: calc(50% + 4px);
}

.custom-slt .select #chooseoption {
 cursor: pointer;
 color: #000;
 width: 100%;
 display: flex;
 height: 100%;
 flex-flow: row wrap;
 align-items: center;
 padding: 5px 40px 5px 15px;
}

.custom-slt .option-container {
 position: relative;
 background: #fff;
 height: 0;
 overflow-y: auto;
 transition: 0.4s;
 box-shadow: #dbdbdb 0 8px 8px;
}

.custom-slt.active .option-container {
 height: 240px;
}

.custom-slt .option-container::-webkit-scrollbar {
 border-left: 1px solid rgba(0, 0, 0, 0.2);
 width: 4px;
}

.custom-slt .option-container::-webkit-scrollbar-thumb {
 background: #0f0e11;
}

.option-container input {
 position: absolute;
 left: 0px;
 top: 0px;
 opacity: 0;
}

.option-container .option {
 position: relative;
}

.custom-slt .option-container .option label {
 position: relative;
 padding-left: 45px;
 height: 50px;
 border-top: 1px solid rgba(0, 0, 0, 0.3);
 cursor: pointer;
 display: flex;
 align-items: center;
 transition: 0.5s all;
 font-size: 16px;
 color: black;
 cursor: pointer;
}

.option-container .option label:before, .option-container .option label:after {
 content: "";
 position: absolute;
 left: 15px;
 top: 13px;
}

.option-container .option label:before {
 width: 1.25em;
 height: 1.25em;
 background: transparent;
 border: 1px solid #3F7799;
 border-radius: 0.125em;
 cursor: pointer;
 transition: background 0.3s;
}

.option-container .option input[type=checkbox]:checked + label:after {
 transform: translate(0.25em, 0.3365384615em) rotate(-45deg);
 width: 0.60em;
 height: 0.300em;
 border: 0.125em solid #fff;
 border-top-style: none;
 border-right-style: none;
 margin-left: 1px;
}

.option-container .option input[type=checkbox]:checked + label:before {
 background: #3F7799;
 border: 1px solid #3F7799;
}

.custom-slt .option-container .option input:checked + label {
 background: #edeeff;
}

.custom-slt .option-container .option:hover {
 background: #edeeff;
}

let selectContainer = document.querySelector(".custom-slt");
let select = document.querySelector(".select");
let chooseOption = document.getElementById("chooseoption");
let options = document.querySelectorAll(".custom-slt .option");
select.onclick = () => {
 selectContainer.classList.toggle("active");
};