12

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?

Community
  • 1
  • 1
Moon
  • 19,518
  • 56
  • 138
  • 200

5 Answers5

20

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>
12

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 :)

Sarfraz
  • 377,238
  • 77
  • 533
  • 578
4

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!

JSTNJNS
  • 41
  • 3
  • and how does that solves the problem. mine is better and most above all works. http://royalsofts.moon.pk/careers.php click the browse button – Moon Dec 06 '11 at 17:10
  • I don't think anybody is trying to be "better". However, with the jQuery plugin I built you can see the name of the file after you've selected, as well as style both the text input AND the button (not just the button, as in your example). – JSTNJNS Dec 13 '11 at 22:45
  • I know you said you wanted to get rid of the text box, but that's a huge usability flaw.. Regardless, you can just hide it with CSS with my example. – JSTNJNS Dec 13 '11 at 22:58
  • Link https://github.com/jstnjns/jquery-file – FLOQ Design Sep 06 '15 at 09:15
3
<label for="file" style="/* style this one, as you want */">Upload file</label>
<input id="file" name="file" type="file" style="display:none;">
boz
  • 51
  • 1
  • I'm afraid this doesn't work when I try it; nothing happens when you try to click "Upload file". – Peter O. Oct 27 '12 at 23:03
  • 2
    This approach works fine in Safari and Chrome (untested elsewhere)... best if you add `cursor: pointer;` CSS to the label. – Dave Everitt Jan 25 '14 at 17:40
  • wont work on firefox because of http://stackoverflow.com/questions/7742278/workaround-for-file-input-label-click-firefox – Ryu_hayabusa Feb 14 '14 at 12:02
  • are you sure this works ? i am trying it in chrome. Initially it shows custom button but then once i click to select file, it goes back to its default state – Ayesha Jan 22 '16 at 00:14
0

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

erinus
  • 734
  • 4
  • 5