Monday, February 6, 2012

HTML: File input without the textbox

I wasted my day today trying to find a way to get a file input without this stupid textbox. Although there are several approaches none of them really works for all the browsers. Then I remembered I saw an example for the JQuery File Upload text box. So what I did is that I took their example and stripped it down to the relevant part. Now you can actually see, that they are some so strange stuff to get it to work. If you want to see the details, increase the opacity and remove the the overflow: hidden line.

You can fully style the button of your choice. In the JQuery File Upload example they have some nice JQuery UI Button style.





<html>

<head>
    <title>jQuery File Upload Example</title>
    <style type="text/css">
        .myfileupload-buttonbar input
        {
            position: absolute;
            top: 0;
            right: 0;
            margin: 0;
            border: solid transparent;
            border-width: 0 0 100px 200px;
            opacity: 0.0;
            filter: alpha(opacity=0);
            -o-transform: translate(250px, -50px) scale(1);
            -moz-transform: translate(-300px, 0) scale(4);
            direction: ltr;
            cursor: pointer;
        }
        .myui-button
        {
            position: relative;
            cursor: pointer;
            text-align: center;
            overflow: visible;
            background-color: red;
            overflow: hidden;
        }
    </style>
</head>
<body>
    <div id="fileupload" >
        <div class="myfileupload-buttonbar ">
            <label class="myui-button">
                <span >Add Files</span>
                <input id="file" type="file" name="files[]" />
            </label>
        </div>
    </div>
</body>
</html>
Posted by at 9 comments:
Labels:
Subscribe to: Comments (Atom)