@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@200;300;400;500;600;700&display=swap'); *{ margin: 0; padding: 0; box-sizing: border-box; font-family: 'Poppins', sans-serif; } body{ display: flex; align-items: center; justify-content: center; min-height: 100vh; background: linear-gradient(to top, #56e2d7 0%, #58cff1 100%); } .wrapper{ background: #fff; padding: 20px; width: 450px; border-radius: 5px; box-shadow: 0px 5px 10px rgba(0,0,0,0.1); } .wrapper form{ height: 55px; display: flex; position: relative; align-items: center; justify-content: space-between; } form i{ position: absolute; width: 55px; text-align: center; font-size: 23px; color: #c4c4c4; pointer-events: none; } form input:valid ~ i{ color: #58cff1; } form input{ height: 100%; width: 100%; outline: none; padding: 0 50px 0 45px; font-size: 20px; caret-color: #58cff1; border: 2px solid #ddd; border-radius: 5px; transition: all 0.1s ease; } form input::selection{ color: #fff; background: #58cff1; } form input:focus, form input:valid{ border-color: #58cff1; } form input::placeholder{ color: #c4c4c4; } form .counter{ position: absolute; right: 3px; width: 55px; font-size: 20px; color: #c4c4c4; text-align: center; border-left: 1px solid #d8d8d8; pointer-events: none; } form input:valid ~ .counter{ color: #58cff1; border-color: #58cff1; }
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