Icon Inputs with Validation
Rounded text inputs with leading icons, a password reveal toggle and a live checkmark that appears once the value is valid.
Preview and code
index.html
<div class="fm"><label>Email<span class="f"><i>✉</i><input placeholder="you@example.com"></span></label><label>Password<span class="f"><i>•</i><input type="password" value="secret12" class="pw"><u class="ey">◉</u></span></label><label>Search<span class="f"><i>⌕</i><input class="sv" value="Ada"><em class="ok">✓</em></span></label></div>
styles.css
.fm{width:100%;height:100%;min-height:380px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:16px;font-family:system-ui,-apple-system,sans-serif;color:#eee;}.fm label{width:260px;font-size:11px;font-weight:600}.f{display:flex;align-items:center;gap:8px;margin-top:6px;height:38px;box-sizing:border-box;padding:0 12px;border-radius:99px;background:#1a1a1a;border:1px solid #2a2a2a;font-weight:400;transition:border-color .25s,box-shadow .25s}.f:focus-within{border-color:#0a84ff;box-shadow:0 0 0 3px rgba(10,132,255,.2)}.f i{font-style:normal;color:#777;font-size:13px}.f input{flex:1;min-width:0;background:none;border:0;outline:0;color:#eee;font:13px system-ui}.f input::placeholder{color:#555}.ey{text-decoration:none;color:#777;cursor:pointer;font-size:12px;transition:color .2s}.ey.on{color:#0a84ff}.ok{font-style:normal;color:#22c55e;transform:scale(0);transition:transform .4s cubic-bezier(.3,1.8,.5,1)}.ok.on{transform:scale(1)}
script.js
(function(){var R=document.querySelector(".fm"),pw=R.querySelector(".pw"),ey=R.querySelector(".ey"),sv=R.querySelector(".sv"),ok=R.querySelector(".ok");ey.onclick=function(){var s=pw.type==="password";pw.type=s?"text":"password";ey.classList.toggle("on",s)};function v(){ok.classList.toggle("on",sv.value.trim().length>2)}sv.oninput=v;v()})();