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.

Read also:

«
»
  • Rob
    The browse field does not get recognized by the server (using cgi.pm in Perl). Any work-around?
  • Eugene
    :mrgreen:
    yes, the path will be send. But what's the of information about path on the computer you can't reach? Nice!
  • LcF
    the script submit the selected file's path in the "file". Here only use "browse" to get the file path.
  • Eugene
    :shock:
    This 'disabled' property is cool... Do you expect disabled form elements to be submitted? You're an optimist, aren't you?
  • ignore my question. i found the answer. i was so buta, din see the setting.
  • 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.
blog comments powered by Disqus