Apply CSS Style to Browse Button

Filed in: Web Development — April 8th, 2004

advertisement

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.

Bookmark and Share

Read also:

« WordPress: QuickTags Hacks
Uh Oh… »
  • 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.
  • 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?
  • 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!
  • Rob
    The browse field does not get recognized by the server (using cgi.pm in Perl). Any work-around?
blog comments powered by Disqus