Experimentell: CSS-Styling für input type=“file“

art 1478831 1920
Bildquelle: Pixabay, freephotocc

Dateiupload-Felder sind nicht besonders schön anzusehen, und weitgehend CSS-resistent, wie auch Checkboxen oder Radiobuttons. Doch die Trickkiste im Webdesign-Bereich ist groß, um Unschönheiten stilbrechender Elemente z.B. mit Hilfe anderer Elemente zu überschreiben.

Beispielmarkup

<div class="upload-wrapper">
<label>My First Upload</label>
<input type="file" name="my-upload-field" /></div>

<div class="upload-wrapper">
<label>My Second Upload</label>
<input type="file" name="my-upload-field" /></div>

Aus



wird



Styling

.upload-wrapper {
    position: relative;
    display: inline-block;
    line-height: 1;
    margin: 0 10px;
}

.upload-wrapper label {
    display: inline-block;
    padding: 0.75em 2em;
    height: 50px;
    color: #fff;
    font-size: 18px;
    font-weight: 700;
    background: #999999;
    border-radius: 2px;
    -webkit-transition: background .3s;
    -moz-transition: background .3s;
    -o-transition: background .3s;
    transition: background .3s;
    cursor: pointer;
}

.upload-wrapper label::before {
    display: inline-block;
    position: relative;
    bottom: -2px;
    content: "";
    width: 20px;
    height: 20px;
    margin-right: 10px;
    background-repeat: no-repeat;
    background-size: contain;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath style='fill:%23ffffff' d='M7 9h2v-4h3l-4-4-4 4h3zM10 6.75v1.542l4.579 1.708-6.579 2.453-6.579-2.453 4.579-1.708v-1.542l-6 2.25v4l8 3 8-3v-4z'%3E%3C/path%3E%3C/svg%3E");
}

.upload-wrapper.file-waiting label::before {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath style='fill:%23ffffff' d='m 9.1175377,0.03675904 v 0.35682939 q 0,2.13340637 -0.00868,4.26681367 c 0,0.7677234 0.3016834,1.066162 1.0683253,1.066162 h 4.61175 c 0.0069,0.108127 0.01725,0.2108546 0.01725,0.3103337 q 0,4.4517162 -0.0081,8.9045132 c 0,0.717984 -0.306009,1.022912 -1.016428,1.022912 H 2.1734224 c -0.7114952,0 -1.018585,-0.304928 -1.018585,-1.02183 q 0,-6.9419529 0,-13.8839041 c 0,-0.71906511 0.303846,-1.02291113 1.0175037,-1.02291113 H 9.1175377 Z M 7.9843343,10.279922 h 2.7605617 c 0.64878,0 0.660674,-0.01729 0.654186,-0.6736502 V 9.5781634 C 11.391557,9.2072763 11.319064,9.1348301 10.942774,9.1348301 H 5.2518873 c -0.698521,0 -0.7158213,0.018384 -0.698521,0.7125764 0.00972,0.3514235 0.088666,0.4325205 0.4433333,0.4325205 q 1.4943585,0.0022 2.9876347,0 z m 0.020549,2.27722 H 10.93521 c 0.388186,0 0.458471,-0.07136 0.463877,-0.464958 0,-0.06704 0,-0.133001 0,-0.19896 0,-0.41522 -0.06812,-0.481179 -0.475772,-0.481179 H 5.2345904 c -0.6736506,0 -0.6898696,0.01514 -0.6812195,0.676895 0,0.392511 0.077854,0.467121 0.4649598,0.468202 z M 7.9627089,8.0016214 h 3.0135871 c 0.33304,0 0.413056,-0.08326 0.421706,-0.4217067 0,-0.075689 0,-0.1513824 0,-0.2270736 0,-0.4325206 -0.06596,-0.4930728 -0.495235,-0.4930728 H 5.2194492 c -0.6563503,0 -0.6779757,0.022702 -0.6660818,0.6920322 0.00648,0.3719671 0.08326,0.4498209 0.454146,0.4509021 z'%3E%3C/path%3E%3Cpath style='fill:%23ffffff' d='M 10.252904,4.5587593 V 0.44981561 c 0.237887,0.0756889 3.771578,3.54774849 4.171659,4.10894369 z'%3E%3C/path%3E%3C/svg%3E");
}

.upload-wrapper:hover label {
    background: #95c11e;
}

.upload-wrapper input[type="file"] {
    position: absolute;
    left: 0px;
    top: 0px;
    right: 0px;
    bottom: 0px;
    width: 100%;
    height: 50px;
    opacity: 0;
    z-index: 99;
    display: block !important;
    cursor: pointer;
}

.uploaded-file-name {
    position: relative;
    z-index: 999;
    display: inline-block;
}

.upload-remove {
    display: inline-block;
    content: "";
    z-index: 999;
    width: 16px;
    height: 16px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath style='fill:%23dd3333' d='M15.854 12.854c-0-0-0-0-0-0l-4.854-4.854 4.854-4.854c0-0 0-0 0-0 0.052-0.052 0.090-0.113 0.114-0.178 0.066-0.178 0.028-0.386-0.114-0.529l-2.293-2.293c-0.143-0.143-0.351-0.181-0.529-0.114-0.065 0.024-0.126 0.062-0.178 0.114 0 0-0 0-0 0l-4.854 4.854-4.854-4.854c-0-0-0-0-0-0-0.052-0.052-0.113-0.090-0.178-0.114-0.178-0.066-0.386-0.029-0.529 0.114l-2.293 2.293c-0.143 0.143-0.181 0.351-0.114 0.529 0.024 0.065 0.062 0.126 0.114 0.178 0 0 0 0 0 0l4.854 4.854-4.854 4.854c-0 0-0 0-0 0-0.052 0.052-0.090 0.113-0.114 0.178-0.066 0.178-0.029 0.386 0.114 0.529l2.293 2.293c0.143 0.143 0.351 0.181 0.529 0.114 0.065-0.024 0.126-0.062 0.178-0.114 0-0 0-0 0-0l4.854-4.854 4.854 4.854c0 0 0 0 0 0 0.052 0.052 0.113 0.090 0.178 0.114 0.178 0.066 0.386 0.029 0.529-0.114l2.293-2.293c0.143-0.143 0.181-0.351 0.114-0.529-0.024-0.065-0.062-0.126-0.114-0.178z'%3E%3C/path%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-size: contain;
    position: relative;
    cursor: pointer;
    margin-left: 15px;
    top: 2px;
};
}

Doch damit würde man nicht erkennen, ob und welche Datei bereits für den Upload vorgesehen ist. Ohne etwas Javascript (jQuery in diesem Fall, da innerhalb von WordPress) geht es also nicht.

(function($, window, document, undefined) {
     'use strict';
     $('.upload-wrapper').each(function() {
         var $input = $(this).find('input[type="file"]'),
             $label = $(this).find('label'),
             $mainthis = $(this),
             labelVal = $label.html();

         $input.on('change', function(e) {
             var fileName = '';
             if (this.files && this.files.length > 1)
                 fileName = (this.getAttribute('data-multiple-caption') || '').replace('{count}', this.files.length);
             else if (e.target.value)
                 fileName = e.target.value.split('\\').pop();
             if (fileName) {
                 $label.html(fileName + '<span class="upload-remove"></span>');
                 $mainthis.addClass('file-waiting');
                 var $remover = $mainthis.find('.upload-remove');
                 $remover.on('click', function() {
                     $label.html(labelVal);
                     e.target.value = '';
                     $mainthis.removeClass('file-waiting');
                 });
             } else {
                 $label.html(labelVal);
                 e.target.value = '';
                 $mainthis.removeClass('file-waiting');
             }
         });
         // style for focus in firefox
         $input
             .on('focus', function() { $input.addClass('focus'); })
             .on('blur', function() { $input.removeClass('focus'); });
     });
 })(jQuery, window, document);

Die Zeile(n) e.target.value = ''; entfernt die Datei tatsächlich, sonst würde sie mit dem Formular übertragen, auch wenn das Label was anderes anzeigt.

Bitte Kommentarfunktion nicht für Supportanfragen nutzen. Dem kann hier nicht entsprochen werden. Die Angabe einer E-Mail-Adresse und eines Namens ist nicht erforderlich. Einen (Spitz)-Namen zu nennen wäre aber doch nett.

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert

Hinweis: Sowohl angegebener Name als auch E-Mail-Adresse (beides ist optional, dafür werden alle Kommentare vor Veröffentlichung geprüft) werden dauerhaft gespeichert. Du kannst jeder Zeit die Löschung Deiner Daten oder / und Kommentare einfordern, direkt über dieses Formular (wird nicht veröffentlicht, und im Anschluss gelöscht), und ich werde das umgehend erledigen. – Mit hinterlassenen Kommentaren hinterlegte IP-Adressen werden nach zwei Monaten automatisch gelöscht

publicly queryable