Invalid Input
CODE
×
HTML
<div class='invalid floating-label'> <input type=text value='Invalid Entry' class='floating-label invalid'> <label class='floating-label'>Label</label> <span class='error'>This is an error message!</span> </div>
CSS
input[type=text].floating-label.invalid { padding-right: 62px !important; color: var(--black); } label.floating-label { font-size: 13px; line-height: 17px; font-family: 'Roboto'; font-style: normal; font-weight: 400; position:absolute; -webkit-transform: translateY(8px); -ms-transform: translateY(8px); transform: translateY(8px); -webkit-transition: all 250ms ease-out; transition: all 250ms ease-out; top: 1px; left: 23px; background-color: #fff; padding: 2px 5px; opacity:1; } span.error { color: var(--dark-red); display:inline-block; font-size: 16px; line-height: 26px; font-family: 'Roboto'; font-style: normal; font-weight: 400; } div.invalid.floating-label > span.error { position: absolute; bottom: -7px; left: 0; } input[type=text].floating-label { padding-right: 62px; }
JS
Invalid Input
Letzte Änderung: 15.01.2025 - 10:19 Uhr
×
Label
This is an error message!