<input type="file"> - custom styles/css

Is there a way to make <input type="file"> look the same in all browsers开发者_运维问答 using some CSS ?

---

Quirksmode.org has an interesting article about it: http://www.quirksmode.org/dom/inputfile.html

---

try this -

1. Take a normal and put it in an element with position: relative.
2. To this same parent element, add a normal and an image, which have the correct styles. Position these elements absolutely, so that they occupy the same place as the .
3. Set the z-index of the to 2 so that it lies on top of the styled input/image.
4. Finally, set the opacity of the to 0. The now becomes effectively invisible, and the styles input/image shines through, but you can still click on the "Browse" button. If the button is positioned on top of the image, the user appears to click on the image and gets the normal file selection window. (Note that you can't use visibility: hidden, because a truly invisible element is unclickable, too, and we need the to remain clickable) Until here the effect can be achieved through pure CSS. However, one feature is still lacking.
5. When the user has selected a file, the visible, fake input field should show the correct path to this file, as a normal would. It's simply a matter of copying the new value of the to the fake input field, but we need JavaScript to do this.

More details - http://www.quirksmode.org/dom/inputfile.html

---

You could try using swfupload, an open source project that embeds a tiny Flash file on the page instead of the file input... You can use CSS to style the button that triggers the flash upload however you want.

Downside: it can be tricky to work with, and of course then your users have to have flash.

Upside: multiple files are selectable at once in the upload dialog!

---

you can simply style your own file input button. just set the CSS attribute of your input element to style="display:none" and handle a click event in javascript. further reading: Using hidden file input elements using the click() method

EDIT: turns out that this doesn't work anymore for security reasons. a little hack is to just set the css style to visibility:hidden. Here is a JSFiddle where i place my <input> field somewhere at the end of my page and trigger the openFileDialog with an <a> element.

//html
<input id="openFileDialog" type="file" id="files" name="files[]" accept=".json, .txt" />

//js
$("#openFile").on("click", function () {
    //throws an error if browser doesn't support file upload
    checkFileApiCompatibility();

    //opens File Dialog
    $("#openFileDialog").click();
    $("#openFileDialog").on('change', function(){
        openFile(this);
    });
});