Apply CSS Style to Browse Button

Filed in: Web Development — April 8th, 2004

There are situation that you may want to apply CSS formating to a <input type="file"> tag (Browse button, allow user to select file). However, you will found that CSS does not work on it when you try to apply CSS. You do nothing wrong, it is nature of the CSS2.

Here is the workaround sample code:
<input name="browse" type="file" style="display: none;">
<input name="file" type="text">
<input name="Submit" type="submit" class="button" value="Browse" onClick="document.form1.browse.click(); document.form1.file.value=document.form1.browse.value; return false;">
<input name="upload" type="submit" class="button" value="Upload" onclick='document.form1.browse.disabled=true;'>

Note:
This code is supported by Internet Explorer only, due to the IE custom method – click(). There is solution for Netscape and Mozilla at here, but I haven’t try it out yet.

Like this post? Please share:

Follow @liewcf on Twitter; Join Facebook page; Subscribe to free newsletter for updates like this article..

  • http://oliviasy.tblog.com/ oliviasy

    need a programmer’s help. am tweaking my blogspot HTML. on the archives, currently the default setting is my archives are showed like this: 10/01/2003 – 10/31/2003

    i want the archives to state only the monthly (i.e: January 2004) how to do? i stuck :( pls help. can email me.

  • http://oliviasy.tblog.com oliviasy

    need a programmer’s help. am tweaking my blogspot HTML. on the archives, currently the default setting is my archives are showed like this: 10/01/2003 – 10/31/2003

    i want the archives to state only the monthly (i.e: January 2004) how to do? i stuck :( pls help. can email me.

  • http://oliviasy.tblog.com/ oliviasy

    ignore my question. i found the answer. i was so buta, din see the setting.

  • http://oliviasy.tblog.com oliviasy

    ignore my question. i found the answer. i was so buta, din see the setting.

  • Eugene

    :shock:
    This ‘disabled’ property is cool… Do you expect disabled form elements to be submitted? You’re an optimist, aren’t you?

  • Eugene

    :shock:
    This ‘disabled’ property is cool… Do you expect disabled form elements to be submitted? You’re an optimist, aren’t you?

  • http://www.liewcf.com/ LcF

    the script submit the selected file’s path in the “file”. Here only use “browse” to get the file path.

  • http://www.liewcf.com LcF

    the script submit the selected file’s path in the “file”. Here only use “browse” to get the file path.

  • Eugene

    :mrgreen:
    yes, the path will be send. But what’s the of information about path on the computer you can’t reach? Nice!

  • Eugene

    :mrgreen:
    yes, the path will be send. But what’s the of information about path on the computer you can’t reach? Nice!

  • Rob

    The browse field does not get recognized by the server (using cgi.pm in Perl). Any work-around?

  • Rob

    The browse field does not get recognized by the server (using cgi.pm in Perl). Any work-around?

t