Wednesday, November 6, 2013

Custom look for file selector

Custom look for file selector

Here is a way of adding custom styled buttons for file selctor inputs. Working: Overlay a transparent "<input type="file" />" over a styled button or other element

    <div id="" style="height: 30px; overflow: hidden; position: absolute; width: 300px; word-break: keep-all;">
        <input style="width: 100px;" type="button" value="select" />
            <span id="files">
                No files selected.      
        <input id="selector" style="height: 30px; opacity: 0; position: absolute; width: 100px;" type="file" />

Try this on jsFiddle: http://jsfiddle.net/bMb59/
Multi file select with ajax upload: here
OR copy & paste the following link to address bar of your browser