customSelect.min.js

const generateSelect=a=>{function b(a,b,c){let d=document.createElement("div"),f=document.createElement("ul"),g=document.createElement("div");a.parentNode.insertBefore(d,a);let h=b.split(" ").filter(a=>""!==a);d.classList.add(...h),d.setAttribute("id",c),f.classList.add("options"),g.classList.add("label"),d.appendChild(a),d.appendChild(g),d.appendChild(f)}const c=document.querySelectorAll(a);for(e of c){const a=e.classList.value,c=e.getAttribute("id");b(e,`select ${a}`,c);const d=e.querySelectorAll("option");for(let a,b=0;b<d.length;b++)a=`<li class='${d[b].selected&&"current"}' value='${d[b].value}'>${d[b].innerText}</li>`,e.parentNode.querySelector(".options").innerHTML+=a;e.parentNode.querySelector(".label").innerHTML=d[0].innerHTML}let d=document.querySelectorAll(".select .label");d.forEach(a=>{a.addEventListener("click",()=>{a.parentNode.classList.contains("active")?a.parentNode.classList.remove("active"):a.parentNode.classList.add("active")})});let f=document.querySelectorAll(".select .options > li");f.forEach(a=>{a.addEventListener("click",()=>{a.closest(".select").querySelector(".label").innerHTML=a.innerHTML,a.closest(".select").classList.remove("active"),a.closest(".select").querySelector("select").value=a.getAttribute("value");let b=a.closest(".select").querySelectorAll(".options li");for(s of b)s.classList.remove("current");a.classList.add("current")})});let g=document.querySelectorAll(".select");g.forEach(a=>{document.addEventListener("click",b=>{a.contains(b.target)||a.classList.remove("active")})})};document.addEventListener("DOMContentLoaded",()=>{generateSelect("select")});