Styling <input type=“file”> [duplicate]

Possible Duplicate:
Styling an input type=“file” button

I was trying to style

<input type="file">

but i have not had much luck. I want to make the textbox disappear and only keep the button. How can I do it?

Answers:

Answer

The CSS way (base code found here):

<html>
    <style type="text/css">
        div.fileinputs {
            position: relative;
        }

        div.fakefile {
            position: absolute;
            top: 0px;
            left: 0px;
            z-index: 1;
        }

        div.fakefile input[type=button] {
            /* enough width to completely overlap the real hidden file control */
            cursor: pointer;
            width: 148px;
        }

        div.fileinputs input.file {
            position: relative;
            text-align: right;
            -moz-opacity:0 ;
            filter:alpha(opacity: 0);
            opacity: 0;
            z-index: 2;
        }
    </style>

    <div class="fileinputs">
        <input type="file" class="file" />

        <div class="fakefile">
            <input type="button" value="Select file" />
        </div>
    </div>
</html>
Answer

There is no easy cross-browser way to style the input type of files. Therefore there exist solution that even use javascript.

Here is a jQuery plugin you can use to style file types in the cross-browser fashion:

Browsers do not let you style file inputs. File Style plugin fixes this problem. It enables you to use image as browse button. You can also style filename field as normal textfield using css. It is written using JavaScript and jQuery.

You can check out the demo here


As also posted on popular ajaxian.com, you can take a look at this too:

Shaun Inman has got a lovely little hack that allows you to style file inputs with CSS and the DOM.

These elements are notoriously painful to deal with, and now we have select boxed playing nice on IE, we need something else to fix up :)

Answer

I wrote this jQuery plugin to make it much simpler to style the file input. Use CSS and "fake elements" to get the results you want.

http://github.com/jstnjns/jquery-file

Hope that helps!

Answer
<label for="file" style="/* style this one, as you want */">Upload file</label>
<input id="file" name="file" type="file" style="display:none;">
Answer

some browsers need File input visible and click the browse button manually, or it will submit nothing to server. so i suggest Saefraz's first solution: File Style Plugin for jQuery

Tags

Recent Questions

Top Questions

Home Tags Terms of Service Privacy Policy DMCA Contact Us

©2020 All rights reserved.