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;
}

.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;
}

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

.custom-slt .option-container .option.selected {
 background: #efefef;
 pointer-events: none;
}

.custom-slt .option-container .option:hover {
 background: #efefef;
 padding-left: 18px;
}

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");
};
options.forEach((e) => {
 e.addEventListener("click", () => {
 chooseOption.innerText = e.innerText;
 selectContainer.classList.remove("active");
 options.forEach((e) => {
 e.classList.remove("selected");
});
 e.classList.add("selected");
});
});