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

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.