/*CSS*/ .field-item__wrapper { position: relative; padding-top: 15px; } .form__field { font-family: inherit; width: 100%; border: 0; border-bottom: 2px solid #000; outline: 0; color: #000; padding: 7px 0; background: 0 0; transition: border-color 0.2s; } .form__field::placeholder { color: transparent; opacity: 0; } .form__field:placeholder-shown ~ .form__label { cursor: text; top: 20px !important; } .form__label { position: absolute; top: 0; display: block; transition: 0.2s; color: #000; } .form__field:focus { padding-bottom: 6px; border-width: 3px; border-image-slice: 1; border-color: #000 !important; } .form__field:focus ~ .form__label { position: absolute; top: 0 !important; font-size: 0.8em; display: block; transition: 0.2s; } .form__field:invalid, .form__field:required { box-shadow: none; } .w-input.error { border-color: #cc3131; } label.error { font-size: 10px; line-height: 24px; color: #cc3131; position: absolute; bottom: -25px; } /*CSS*/
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