html <div class="input-group" style="top: 15px"> <input type="text" id="name" required class="input" /> <label for="name" class="input-label"> Email address </label> </div> css .input-group { position: relative; } .input { padding: 10px; border: none; border-radius: 4px; font: inherit; color: #fff; background-color: transparent; outline: 2px solid #d1c5fc; } .input-label { position: absolute; top: 0; left: 0; transform: translate(10px, 10px); transition: transform 0.25s; } .input:focus + .input-label, .input:valid + .input-label { transform: translate(10px, -14px) scale(0.8); color: #000; padding-inline: 5px; background: #fff; } .input:is(:focus, :valid) { outline-color: #b2a7d7; }
Preview:
downloadDownload PNG
downloadDownload JPEG
downloadDownload SVG
Tip: You can change the style, width & colours of the snippet with the inspect tool before clicking Download!
Click to optimize width for Twitter