File input mit CSS verschönern

This site uses cookies. By continuing to browse this site, you are agreeing to our Cookie Policy.

  • File input mit CSS verschönern

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

    Source Code

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

    Folgendes JavaScript erledigt das für euch:

    Source Code

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

    Quelle: quirksmode.org/dom/inputfile.html