Wachtwoord tonen met knipperend oog New

The eye in the password field opens or closes and the dots decode letter by letter into readable text, and back again. For login screens and client portals.

Klantportaal · Installatiebedrijf HoekWachtwoord

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.

<!-- Wachtwoord tonen met knipperend oog · NedDev · eigen werk. -->
<div class="jouw-container">
<div class="pwe"><div class="pwe__card"><span class="pwe__kk">Klantportaal · Installatiebedrijf Hoek</span><span class="pwe__lb">Wachtwoord</span>
<div class="pwe__fld"><input class="pwe__in" type="password" value="Zomer2026!Delft" aria-label="Wachtwoord" autocomplete="current-password" spellcheck="false"><span class="pwe__mir" aria-hidden="true"></span>
<button class="pwe__eye" type="button" aria-label="Toon wachtwoord" aria-pressed="false"><svg viewBox="0 0 24 24" width="20" height="20" aria-hidden="true"><g class="pwe__open"><path d="M2 12s3.6-6.5 10-6.5S22 12 22 12s-3.6 6.5-10 6.5S2 12 2 12z"/><circle cx="12" cy="12" r="3.2"/></g><g class="pwe__shut"><path d="M2 11.5s3.6 5 10 5 10-5 10-5"/><path d="M5.2 14.6l-1.5 2.1M9.4 16.2l-.6 2.4M14.6 16.2l.6 2.4M18.8 14.6l1.5 2.1"/></g></svg></button></div>
<button class="pwe__go" type="button">Inloggen</button></div></div>
</div>

/* Wachtwoord tonen met knipperend oog · NedDev · eigen werk. */
.pwe{position:absolute;inset:0;background:#f4f3f1;font-family:'Switzer',system-ui,sans-serif;color:#0a0a0a;display:grid;place-items:center;padding:14px}
.pwe__card{width:min(290px,100%);background:#fff;border-radius:6px;padding:16px;display:flex;flex-direction:column;gap:7px}
.pwe__kk{font:500 9.5px 'JetBrains Mono',monospace;letter-spacing:.08em;text-transform:uppercase;color:#F5480F;margin-bottom:4px}
.pwe__lb{font-size:12px;font-weight:600}
.pwe__fld{position:relative}
.pwe__in{width:100%;box-sizing:border-box;font:500 14px 'JetBrains Mono',monospace;letter-spacing:.04em;color:#0a0a0a;caret-color:#0a0a0a;border:1px solid #dcd8d2;border-radius:4px;padding:10px 44px 10px 11px;outline:none;transition:border-color .2s}
.pwe__in:focus{border-color:#0a0a0a}
.pwe__mir{position:absolute;left:12px;top:0;bottom:0;display:flex;align-items:center;font:500 14px 'JetBrains Mono',monospace;letter-spacing:.04em;color:#0a0a0a;pointer-events:none;white-space:pre}
.pwe__mir em{font-style:normal;color:#F5480F}
.pwe__eye{appearance:none;position:absolute;right:4px;top:50%;width:34px;height:30px;margin-top:-15px;border:0;border-radius:4px;background:none;color:#0a0a0a;display:grid;place-items:center;cursor:pointer;transition:background .2s}
.pwe__eye:hover{background:#f4f3f1}.pwe__eye:focus-visible{outline:2px solid #F5480F;outline-offset:1px}
.pwe__eye svg{fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;overflow:visible}
.pwe__open{transform-origin:12px 12px;transform:scaleY(.08);opacity:0;transition:transform .32s cubic-bezier(.3,1.4,.5,1),opacity .15s}
.pwe__open circle{fill:#F5480F;stroke:none}
.pwe__shut{transition:opacity .15s .1s}
.pwe.is-show .pwe__open{transform:none;opacity:1}.pwe.is-show .pwe__shut{opacity:0;transition-delay:0s}
.pwe__go{appearance:none;margin-top:4px;height:38px;border:0;border-radius:4px;background:#0a0a0a;color:#fff;font:600 13px 'Switzer',sans-serif;cursor:pointer;transition:background .2s}
.pwe__go:hover{background:#F5480F}.pwe__go:focus-visible{outline:2px solid #F5480F;outline-offset:2px}
@media (prefers-reduced-motion:reduce){.pwe__open,.pwe__shut{transition:none}}

// Wachtwoord tonen met knipperend oog · NedDev · eigen werk.
// root = het element waarin de HTML staat
function init(root){
root=root.querySelector('.pwe')||root;
var inp=root.querySelector('.pwe__in'),mir=root.querySelector('.pwe__mir'),eye=root.querySelector('.pwe__eye');
var rm=matchMedia('(prefers-reduced-motion: reduce)').matches,show=false,raf=0,touched=false;
var CH='ABCDEFGHJKLMNPQRSTUVWXYZabcdefghjkmnpqrstuvwxyz23456789#?%';
function rnd(){return CH[Math.floor(Math.random()*CH.length)];}
function esc(c){return c==='<'?'&lt;':c==='>'?'&gt;':c==='&'?'&amp;':c;}
function finish(){cancelAnimationFrame(raf);mir.innerHTML='';inp.style.color='';if(!show)inp.type='password';}
function anim(toShow){var v=inp.value,t0=performance.now();inp.type='text';inp.style.color='transparent';
raf=requestAnimationFrame(function f(now){var t=now-t0,out='',all=true;for(var i=0;i<v.length;i++){var at=80+i*38,c;
if(t>=at+90){c=toShow?esc(v[i]):'\u2022';}else if(t>=at){c='<em>'+esc(rnd())+'</em>';all=false;}else{c=toShow?'\u2022':esc(v[i]);all=false;}out+=c;}
mir.innerHTML=out;if(all){finish();return;}raf=requestAnimationFrame(f);});}
function set(v){show=v;root.classList.toggle('is-show',v);eye.setAttribute('aria-pressed',v?'true':'false');eye.setAttribute('aria-label',v?'Verberg wachtwoord':'Toon wachtwoord');cancelAnimationFrame(raf);mir.innerHTML='';
if(rm){inp.type=v?'text':'password';inp.style.color='';return;}anim(v);}
eye.addEventListener('click',function(){touched=true;set(!show);});
inp.addEventListener('input',function(){touched=true;finish();});
inp.addEventListener('focus',function(){touched=true;});
if(!rm){setTimeout(function(){if(!touched)set(true);},800);setTimeout(function(){if(!touched)set(false);},3600);}
}
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 →