Select Dropdown

<!-- Select Dropdown · NedDev · eigen werk. -->
<div class="jouw-container">
<div class="asd-wrap"><button class="asd-trigger" aria-haspopup="listbox"><span class="asd-cur">Kies een optie</span><svg class="asd-arr" viewBox="0 0 24 24" width="18" height="18" fill="none" stroke="#0a0a0a" stroke-width="2"><path d="M6 9l6 6 6-6"/></svg></button><ul class="asd-list" role="listbox"><li role="option">Nederland</li><li role="option">België</li><li role="option">Duitsland</li><li role="option">Frankrijk</li></ul></div>
</div>

/* Select Dropdown · NedDev · eigen werk. */
.asd-wrap{position:relative;width:300px;font-family:'Switzer',sans-serif}
.asd-trigger{width:100%;display:flex;align-items:center;justify-content:space-between;padding:13px 16px;background:#fff;border:1px solid rgba(10,10,10,.12);border-radius:10px;cursor:pointer;font-size:15px;color:#0a0a0a;transition:border-color .2s}
.asd-trigger:hover{border-color:#0a0a0a}.asd-arr{transition:transform .25s}.asd-wrap.asd-open .asd-arr{transform:rotate(180deg)}
.asd-list{list-style:none;margin:6px 0 0;padding:6px;position:absolute;left:0;right:0;background:#fff;border:1px solid rgba(10,10,10,.12);border-radius:10px;box-shadow:0 10px 30px rgba(10,10,10,.12);opacity:0;transform:translateY(-8px) scaleY(.96);transform-origin:top;pointer-events:none;transition:opacity .2s,transform .2s;z-index:5}
.asd-wrap.asd-open .asd-list{opacity:1;transform:none;pointer-events:auto}
.asd-list li{padding:10px 12px;border-radius:7px;font-size:14px;color:#0a0a0a;cursor:pointer;transition:background .12s}
.asd-list li:hover{background:rgba(245,72,15,.08)}
.asd-list li.asd-sel{color:#F5480F;font-weight:600;background:rgba(245,72,15,.06)}

// Select Dropdown · NedDev · eigen werk.
// root = het element waarin de HTML staat
function init(root){
root=root.querySelector('.asd-wrap')||root;var trg=root.querySelector('.asd-trigger'),cur=root.querySelector('.asd-cur'),opts=[].slice.call(root.querySelectorAll('.asd-list li'));trg.addEventListener('click',function(e){e.stopPropagation();root.classList.toggle('asd-open');});opts.forEach(function(o){o.addEventListener('click',function(){opts.forEach(function(x){x.classList.remove('asd-sel');});o.classList.add('asd-sel');cur.textContent=o.textContent;root.classList.remove('asd-open');});});document.addEventListener('click',function(e){if(!root.contains(e.target))root.classList.remove('asd-open');});
}
init(document.querySelector('.jouw-container'));