Coder Wrap provides free to use snippets

/**Typeo CSS Start**/	
* {
 box-sizing: border-box;
}
body {
 background-color: #d2dbd2;
 font-family: cursive;

}
.desc {
  max-width: 600px;
  width: 100%;
  margin:0px auto;
  padding: 80px 0px;
  text-align: center;  
}
.desc h2 {
  font-size: 40px;
}
.customsltbox {
  padding-top: 120px;
	margin: auto;
}
/**Typeo CSS End**/
.customsltbox {
 width: 100%;
 max-width: 400px;
 position: relative;
}

.customsltbox+select {
 display: none;
}

.customsltbox .selectTxt {
 width: 100%;
 position: relative;
 background-color: #fff;
 display: inline-block;
 font-family: cursive;
 padding: 12px 20px 12px 15px;
 font-size: 16px;
 cursor: pointer;
 z-index: 1;
 box-shadow: #bcc1b8 0px 0 10px;
 transition: 0.5s all;
}

.customsltbox .selectTxt:after {
 content: '';
 position: absolute;
 right: 12px;
 top: 50%;
 width: 8px;
 height: 8px;
 border-left: #9f9f9f 2px solid;
 border-bottom: #9f9f9f 2px solid;
 transform: rotate(-45deg);
 margin-top: -7px;
 pointer-events: none;
}
.customsltbox .selectTxt.open:after {
 transform: rotate(135deg);
 margin-top: -3px;
}

.customsltbox ul {
 background-color: #fff;
 font-family: cursive;
 padding: 0;
 font-size: 16px;
 cursor: pointer;
 box-shadow: #bcc1b8 0px 0 10px;
 list-style: none;
 margin: 0;
 width: 100%;
 pointer-events: none;
 transition: 0.5s all;
 opacity: 0;
 height: 0;
 position: absolute;
 left: 0px;
 top: 100%;
}

.customsltbox ul li {
 padding: 7px 15px;
 border-bottom: #ccc 1px solid;
}

.customsltbox ul.openList {
 height: auto;
 opacity: 1;
 pointer-events: auto;
 margin-top: 10px;
}

.customsltbox ul li:hover,
.customsltbox ul li.active {
 background-color: #0e2c56;
 color: #fff;
}

let customSlt = document.createElement("div");	
const classCSlt = customSlt.setAttribute("class", "customsltbox");
const ul = document.createElement("ul");
const items = document.querySelectorAll('.custom-slt select option');
items.forEach(function(item) {
  const li = document.createElement("li");
  li.textContent = item.textContent;
  ul.appendChild(li);
});
document.querySelector('.custom-slt').prepend(customSlt)
const sltText = document.querySelector('select option:first-child').textContent;
document.querySelector('.customsltbox').innerHTML = `${sltText}`;
document.querySelector('.customsltbox').appendChild(ul);

//OnClick Dropdown function 
document.querySelector('.customsltbox .selectTxt').addEventListener('click', function(e){
  e.target.classList.toggle('open');
  e.target.nextElementSibling.classList.toggle('openList');
});
document.querySelector('.customsltbox ul li:first-child').classList.add('active');
const ditems = document.querySelectorAll('.customsltbox ul li');
ditems.forEach(function(item){
  item.addEventListener('click', function(e) {
    const selectedText = e.target.textContent;
    document.querySelector('.customsltbox .selectTxt').innerHTML = selectedText;
    document.querySelectorAll('.customsltbox ul li.active').forEach(el => el.classList.remove('active'));
    e.target.classList.add('active');
    document.querySelector('.customsltbox .selectTxt').classList.remove('open');
    document.querySelector('.customsltbox ul').classList.remove('openList');
    const originalSelect = document.querySelector('select');
    const originalOption = originalSelect.querySelector(`option[value='${selectedText}']`);
    if (originalOption) {
      originalOption.selected = true;
    }
  });
});