Inputfield (optional)
CODE
×
HTML
<div class='form-group'> <span class='optional'>optional</span> <input type=text value='' class='floating-label' placeholder='Label'> <label class='floating-label'>Label</label> <span class='notice'>Ansprechpartner für Rücksprachen</span> </div>
CSS
input[type=text].floating-label { padding-right: 62px; } 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.optional { position:absolute; display:inline-block; -webkit-transform: translateY(8px); -ms-transform: translateY(8px); transform: translateY(8px); -webkit-transition: all 250ms ease-out; transition: all 250ms ease-out; top: 0; right: 13px; background-color: #fff; padding: 2px 5px; font-family: 'Roboto'; font-style: normal; font-weight: 400; font-size: 13px; line-height: 17px; color: var(--black); } span.notice { display:block; font-family: 'Roboto'; font-style: normal; font-weight: 400; font-size: 16px; line-height: 26px; line-height: 125%; color: var(--black); background-color: var(--white); margin-top: 10px; margin-bottom: 16px; padding-top: 0; padding-right: 0; padding-bottom: 0; padding-left: 0; } span.notice + div { margin-top: -20px; }
JS
Inputfield (optional)
×
optional
Label
Ansprechpartner für Rücksprachen