Expanding Search

<!-- Expanding Search · Bron: Uiverse · licentie MIT. Laat deze vermelding staan bij hergebruik. -->
<div class="jouw-container">
<div class="sbx-wrap"><input class="sbx-input" type="text" placeholder="Zoeken..."><button class="sbx-btn" aria-label="Zoeken"><svg viewBox="0 0 24 24" width="20" height="20" fill="none" stroke="#fff" stroke-width="2"><circle cx="11" cy="11" r="7"/><path d="M21 21l-4.3-4.3"/></svg></button></div>
</div>

/* Expanding Search · Bron: Uiverse · licentie MIT. Laat deze vermelding staan bij hergebruik. */
.sbx-wrap{display:flex;align-items:center;justify-content:flex-end;background:#fff;border:1px solid rgba(10,10,10,.12);border-radius:30px;padding:5px;width:56px;transition:width .35s cubic-bezier(.4,0,.2,1);overflow:hidden;font-family:'Switzer',sans-serif}
.sbx-wrap.sbx-open{width:320px}
.sbx-input{flex:1;min-width:0;border:none;outline:none;background:transparent;font-size:15px;color:#0a0a0a;padding:0 6px 0 14px;opacity:0;transition:opacity .25s}
.sbx-wrap.sbx-open .sbx-input{opacity:1}
.sbx-btn{flex:none;width:44px;height:44px;border-radius:50%;border:none;background:#F5480F;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:transform .2s}
.sbx-btn:active{transform:scale(.92)}

// Expanding Search · Bron: Uiverse · licentie MIT. Laat deze vermelding staan bij hergebruik.
// root = het element waarin de HTML staat
function init(root){
root=root.querySelector('.sbx-wrap')||root;var btn=root.querySelector('.sbx-btn'),inp=root.querySelector('.sbx-input');btn.addEventListener('click',function(){var open=root.classList.toggle('sbx-open');if(open)setTimeout(function(){inp.focus();},120);});inp.addEventListener('blur',function(){if(!inp.value)root.classList.remove('sbx-open');});
}
init(document.querySelector('.jouw-container'));