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>

9 comments:

Anonymous said...

thanks!

Basil Downs said...

Your post was truly impressive. I had a wonderful time reading and understanding your post. It is worth discovering. Thank you for sharing it with us.

Anonymous said...

Well, i found an easier way

width: 75%

it cuts the part with the box and only keeps the button ! :)

Anonymous said...

This is awesome!
Thanks a lot.

Anonymous said...

width: 75%
This method is not guaranteed to work across all browsers.
A similar method is to set "color" the same as your "background-color", again not guaranteed to work in all scenarios.

pg slot said...

ทดลอง เล่น สล็อต xo ทดสอบ เล่นสล็อต pgslot ไม่ต้องฝาก ก่อนเล่น ไม่ต้องมีบัญชีก็เล่นได้ เหตุเพราะคณะทำงาน XO พวกเราได้จัดเตรียมเกมพิเศษไว้ให้สมาชิกทุกท่านสามารถเล่นได้เงิน

Pgslot แหล่งรวมสล็อตสุดฮิต said...

สล็อต พี จี แตก ง่าย ค่ายเกมใหม่ที่มีคุณภาพ PG SLOT ถือได้ว่าเป็นอีกหนึ่งค่ายเกมสล็อตออนไลน์ ได้เงินจริง ยอดนิยมมากมายๆให้บริการใน สล็อตเว็บไซต์ตรงสนุกสนานไม่ผ่านเอเย่นต์

เกมส์ สล็อต PG said...

ปัน โปร 66 สล็อต ในยุคดิจิทัลที่เร็วกับความเร่งรีบในปัจจุบัน การค้นหาดีลที่ดีที่สุดออนไลน์กลายเป็นสิ่งสำคัญสำหรับผู้ช็อปเปอร์ตั้งใจ PGSLOT ด้วยแพลตฟอร์มอีคอมเมิร์ซ

pg slot99th said...

ทดลองเล่นสล็อตฟรี เกมใหม่ล่าสุด ฟรีทุกค่าย เป็นหมายถึงเกมสล็อตออนไลน์ที่ผู้เล่นสามารถเล่นได้โดยไม่ต้องใช้เงินจริง เป็นทางเลือกที่ดีสำหรับผู้ที่ต้องการทดลองเล่นเกม pg หรือฝึกฝนทักษะก่อนที่จะลงเดิมพันด้วยเงินจริง