Inputfield (File-Upload error)
CODE
×
HTML
<div class='file-upload floating-label invalid' tabindex="0"> <input type=file value='' class='file-upload invalid' tab-index="-1"> <span class='placeholder'>Tabellarischer Lebenslauf</span> <img class='file-upload-img' src='img/Upload Icon 1.svg'> <span class='notice'>PDF-Datei, max. 2.5 MB</span> <span class='error'>Es wurde bislang keine Datei hochgeladen!</span> </div>
CSS
div.file-upload.floating-label.invalid:focus, div.file-upload.floating-label.invalid:focus-visible { border-left: 6px solid rgb(208, 16, 24) !important; } div.file-upload.floating-label.invalid:focus > span.notice , div.file-upload.floating-label.invalid:focus-visible > span.notice, div.file-upload.floating-label.invalid:focus > span.error, div.file-upload.floating-label.invalid:focus-visible > span.error { left: -6px !important; } input[type=file].file-upload.invalid { color: var(--black); margin-top: 0; margin-bottom: 0; padding-right: 90px; } img.file-upload-img { -webkit-transition: all 300ms ease-in-out; transition: all 300ms ease-in-out; width: 59px; height: 59px; } span.placeholder { display:block; font-size: 16px; line-height: 26px; line-height: 125%; color: var(--black); margin-bottom: 12px; padding-top: 0; padding-right: 0; padding-bottom: 0; padding-left: 0; } div.file-upload.floating-label.invalid > input[type=file].file-upload.invalid { padding-right: 120px; } div.file-upload.floating-label.invalid > span.placeholder { position: absolute; top: 20px; left: 28px; } div.file-upload.floating-label.invalid > img.file-upload-img { position: absolute; top: -1px; right: 0; } div.file-upload.floating-label.invalid > span.notice { position: absolute; top: 54px; left: 0px; } div.file-upload.floating-label.invalid > span.error { position: absolute; bottom: -60px !important; left: 0px; } input[type=file].file-upload.invalid:hover, input[type=file].file-upload.invalid:focus { background-image: url('../img/Upload Icon Hover.svg'); background-repeat: no-repeat; background-attachment: scroll; background-position: right center; background-size: auto; } img.file-upload-img:hover, img.file-upload-img:focus { } div.file-upload.floating-label.invalid:hover > img.file-upload-img, div.file-upload.floating-label.invalid:focus > img.file-upload-img { top: -5px; } 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; } span.error { color: var(--dark-red); display:inline-block; font-size: 16px; line-height: 26px; font-family: 'Roboto'; font-style: normal; font-weight: 400; }
JS
Inputfield (File-Upload error)
Letzte Änderung: 03.03.2025 - 10:52 Uhr
×
Tabellarischer Lebenslauf
PDF-Datei, max. 2.5 MB
Es wurde bislang keine Datei hochgeladen!