File input mit CSS verschönern

Diese Seite verwendet Cookies. Durch die Nutzung unserer Seite erklären Sie sich damit einverstanden, dass wir Cookies setzen. Weitere Informationen

  • File input mit CSS verschönern

    Das Input Element "file" lässt sich nicht wie ein gewähnliches Element per css behandeln
    z.B.

    Quellcode

    1. <input type="file" name="upload" style="color:#ff0000" />

    Folgendes JavaScript erledigt das für euch:

    Quellcode

    1. var W3CDOM = (document.createElement && document.getElementsByTagName);
    3. function initFileUploads() {
    4. if (!W3CDOM) return;
    5. var fakeFileUpload = document.createElement('div');
    6. fakeFileUpload.className = 'fakefile';
    7. fakeFileUpload.appendChild(document.createElement('input'));
    8. var image = document.createElement('img');
    9. image.src='pix/button_select.gif';
    10. fakeFileUpload.appendChild(image);
    11. var x = document.getElementsByTagName('input');
    12. for (var i=0;i<x.length;i++) {
    13. if (x[i].type != 'file') continue;
    14. if (x[i].parentNode.className != 'fileinputs') continue;
    15. x[i].className = 'file hidden';
    16. var clone = fakeFileUpload.cloneNode(true);
    17. x[i].parentNode.appendChild(clone);
    18. x[i].relatedElement = clone.getElementsByTagName('input')[0];
    19. x[i].onchange = x[i].onmouseout = function () {
    20. this.relatedElement.value = this.value;
    21. }
    22. }
    23. }
    Alles anzeigen

    Quelle: quirksmode.org/dom/inputfile.html