Zoekveld met wisselende voorbeelden New
Search field whose hint text changes every few seconds ("Search for radiator foil", "caulking gun", ...), so visitors see what they can search for. The changing word slides up calmly, stops as soon as you type, when off-screen or in a hidden tab, and stays still with reduced motion. Enter on an empty field searches for the hint shown. The real label stays fixed for screen readers; the rotating text is decoration only.
How to use it
- Paste the HTML where the forms & inputs should appear.
- Add the CSS to your stylesheet. All classes are prefixed, so nothing clashes with your own styles.
- Add the JavaScript and call init() with the element that contains the HTML.
<!-- Zoekveld met wisselende voorbeelden · NedDev · eigen werk. -->
<div class="jouw-container">
<div class="zwp"><div class="zwp__in">
<form class="zwp__form" role="search">
<label class="zwp__lab" for="zwp-q">Zoek in 8.000 producten van Bouwmarkt Kok, Gouda</label>
<div class="zwp__box">
<svg class="zwp__ic" viewBox="0 0 20 20" aria-hidden="true"><circle cx="8.5" cy="8.5" r="5.5"/><path d="M13 13l4 4"/></svg>
<input class="zwp__q" id="zwp-q" type="search" autocomplete="off" aria-describedby="zwp-tip">
<span class="zwp__ph" aria-hidden="true">Zoek op <span class="zwp__wrap"><span class="zwp__w">radiatorfolie</span></span></span>
<button class="zwp__btn" type="submit">Zoeken</button>
</div>
<p class="zwp__tip" id="zwp-tip">Tip: zoek op productnaam, merk of artikelnummer.</p>
</form>
<p class="zwp__out" aria-live="polite"></p>
</div></div>
</div>/* Zoekveld met wisselende voorbeelden · NedDev · eigen werk. */
.zwp{position:absolute;inset:0;overflow:auto;display:flex;padding:14px;box-sizing:border-box;background:#f4f3f1;font-family:'Switzer',sans-serif;color:#0a0a0a}
.zwp *,.zwp *::before,.zwp *::after{box-sizing:border-box}
.zwp__in{margin:auto;width:100%;max-width:400px}
.zwp__lab{display:block;font-size:14px;font-weight:700;margin-bottom:8px;line-height:1.35}
.zwp__box{position:relative;display:flex;align-items:center;height:46px;background:#fff;border:1px solid #8c8c8c;border-radius:4px;transition:border-color .15s,box-shadow .15s}
.zwp__box:hover{border-color:#0a0a0a}
.zwp__box:focus-within{border-color:#0a0a0a;box-shadow:0 0 0 3px rgba(245,72,15,.35)}
.zwp__ic{flex:none;width:18px;height:18px;margin:0 0 0 12px;fill:none;stroke:#4a4a4a;stroke-width:1.8;stroke-linecap:round}
.zwp__q{flex:1;min-width:0;height:100%;padding:0 10px;border:0;outline:0;background:none;font:400 15px 'Switzer',sans-serif;color:#0a0a0a;-webkit-appearance:none;appearance:none}
.zwp__q::-webkit-search-cancel-button{cursor:pointer}
.zwp__ph{position:absolute;left:40px;right:90px;top:0;bottom:0;display:flex;align-items:center;gap:.28em;font-size:15px;color:#6b6b6b;pointer-events:none;white-space:nowrap;overflow:hidden}
.zwp__wrap{position:relative;display:inline-block;height:1.4em;overflow:hidden;vertical-align:bottom}
.zwp__w{display:block;line-height:1.4em;color:#3a3a3a}
.zwp__w.is-out{animation:zwp-out .32s ease forwards}
.zwp__w.is-in{animation:zwp-in .32s ease}
@keyframes zwp-out{to{transform:translateY(-100%);opacity:0}}
@keyframes zwp-in{from{transform:translateY(100%);opacity:0}to{transform:none;opacity:1}}
.zwp.has-val .zwp__ph{display:none}
.zwp__btn{flex:none;height:36px;margin-right:4px;padding:0 14px;border:0;border-radius:4px;background:#0a0a0a;color:#fff;font:600 13.5px 'Switzer',sans-serif;cursor:pointer;transition:background-color .15s}
.zwp__btn:hover{background:#2a2a2a}
.zwp__btn:active{transform:translateY(1px)}
.zwp__btn:focus-visible{outline:2px solid #F5480F;outline-offset:2px}
.zwp__tip{margin:6px 0 0;font-size:12.5px;color:#4a4a4a}
.zwp__out{margin:10px 0 0;font-size:13px;min-height:1.4em}
.zwp__out b{font-weight:600}
@media (prefers-reduced-motion:reduce){.zwp *{transition:none!important;animation:none!important}}// Zoekveld met wisselende voorbeelden · NedDev · eigen werk.
// root = het element waarin de HTML staat
function init(root){
var w=root.querySelector('.zwp');if(!w)return;
var sfx='-'+Math.random().toString(36).slice(2,7);
var q=w.querySelector('.zwp__q'),lab=w.querySelector('.zwp__lab'),tip=w.querySelector('.zwp__tip'),ww=w.querySelector('.zwp__w'),out=w.querySelector('.zwp__out'),f=w.querySelector('.zwp__form');
q.id=q.id+sfx;lab.setAttribute('for',q.id);tip.id=tip.id+sfx;q.setAttribute('aria-describedby',tip.id);
var W=['radiatorfolie','kitpistool','vloerverwarming 10 m\u00b2','buitenkraan vorstvrij','LED-plafondlamp','houten vlonderplank'],H={'radiatorfolie':14,'kitpistool':9,'vloerverwarming 10 m\u00b2':6,'buitenkraan vorstvrij':4,'LED-plafondlamp':38,'houten vlonderplank':22};
var i=0,tm=null,vis=true,rm=window.matchMedia&&matchMedia('(prefers-reduced-motion: reduce)').matches;
function running(){return !rm&&vis&&!document.hidden&&!q.value;}
function tick(){if(!running())return;ww.classList.remove('is-in');ww.classList.add('is-out');
setTimeout(function(){i=(i+1)%W.length;ww.textContent=W[i];ww.classList.remove('is-out');void ww.offsetWidth;ww.classList.add('is-in');},320);}
function start(){if(tm||!running())return;tm=setInterval(tick,2800);}
function stop(){clearInterval(tm);tm=null;}
q.addEventListener('input',function(){w.classList.toggle('has-val',!!q.value);if(q.value)stop();else start();});
document.addEventListener('visibilitychange',function(){if(document.hidden)stop();else start();});
if('IntersectionObserver' in window){new IntersectionObserver(function(es){vis=es[0].isIntersecting;if(vis)start();else stop();}).observe(w);}
f.addEventListener('submit',function(e){e.preventDefault();var v=q.value.trim()||W[i];if(!q.value){q.value=v;w.classList.add('has-val');stop();}
var n=H[v]!=null?H[v]:(v.length%7)*3+2;out.innerHTML='<b>'+n+' producten</b> voor \u201c'+v.replace(/[<>&]/g,'')+'\u201d, de meeste op voorraad in Gouda.';});
start();
}
init(document.querySelector('.jouw-container'));More forms & inputs
Seen something you like?
Add it to your selection and send it over. We build your site around it, in your brand.
Get in touch →