Howto Style the Button of a input type="file" Control
NOTE: the concepts presented in this article are now considered obsolete possibly because better alternatives are available.
Update!! 12-20-2003
There seems to be a problem with the code presented in this article. When you click the new and styled Browse button, the Browse for File dialog is opened, and when you select a file, both text boxes (the hidden and the fake field) are displayed with the file's full path and filename. However, when you click the submit button, the real (and hidden) file box gets cleared and the form will not submit. When you click the submit button again, the form will eventually submit, but because the file box is empty, your file will not be uploaded to the server. This problem has been discussed extensively on various forums on the web, including the one run by Wrox.
So far, I haven't been able to isolate the problem or come up with a solution. It looks like this problem is caused by some security mechanism in Internet Explorer. I haven't tested various versions of IE yet, but I am sure it doesn't run on IE 6, SP1 (well, it doesn't run on *my* IE 6, SP1 ;-) )
If you do find a browser that runs this code fine, please let me know.
When you are using Cascading Style
Sheets (CSS) in your Web pages, it is likely that you want to change the
appearance of your HTML buttons as well. After all, the dull looking gray
buttons give your site a bit of an old fashioned look. Usually, changing
the style is as easy as setting a style or
a class attribute, like <input
type="button" value="Send Form" style="background-color: red";> to
give the button a red color. However, this won't work with the Browse button
that is attached to an input box that allows a user to upload a file. This
article will demonstrate a solution to that problem.
Prerequisites
This example has been checked for Internet Explorer 6. Earlier versions of Internet Explorer may support this as well. It does not seem to work on various flavors of Opera, Netscape and Mozilla, so it is most useful in an Intranet environment where you can control the browser your visitor is using. If you find a browser that runs this code fine, and it is not listed here, please send me a message with the browser type and platform it runs on, and I'll add it to the Works With list at the end of this article.
Since this code example uses JavaScript, your user must have a browser capable of running JavaScript and have it enabled.
The Code
Take a look at the code for this article in plain text format. Alternatively, you can download a zipped version of a working example at the end of this article.
The trick to style the Browse button, is to not use this button at all. This may sound a bit confusing, but it is the only way to do it. There is no way to directly apply style information to the Browse button for the <input type="file"> control. Instead, you should hide the entire file control using CSS. Once you have hidden the file control, you should add an ordinary text box and a button with the text Browse on it to your page, so your users think they are looking at a normal file control. In the onclick handler of the button, you can call the click event of the real file button, so the user is still presented with a Choose File dialog. When a file has been selected, you can copy the contents of the file control to your second and visible text box. Although the file control is hidden with CSS, it is still a functional control, so the file that the user has selected, will still be available in the control's value attribute. Let's look at the code to see how this all fits together.
<html>
<head>
<title>File Upload Example</title>
<script language="JavaScript" type="text/javascript">
function HandleFileButtonClick()
{
document.frmUpload.myFile.click();
document.frmUpload.txtFakeText.value = document.frmUpload.myFile.value;
}
</script>
</head>
<body>
<form name="frmUpload">
<!-- Real Input field, but hidden-->
<input type="file" name="myFile" style="display:none;">
<!-- Fake field to fool the user -->
<input type="text" name="txtFakeText" readonly="true">
<!-- Button to invoke the click of the File Input -->
<input type="button" onclick="HandleFileButtonClick();"
value="Upload File" style="background: red;">
</form>
</body>
</html>
The <head> section defines one simple JavaScript function that is called when you click the visible and styled button. The first line of code calls the click() handler of the <input type="file"> control. This causes the Choose File dialog of the browser to appear, so a user can browse for a file. As soon as they have chosen a file, the second line of JavaScript fires. All this line does, is copy the file name from the file control into the visible text box, so the user knows what file he or she has selected.
With this bit of JavaScript in place, the rest of the code is pretty easy to understand:
<form name="frmUpload">
<!-- Real Input field, but hidden-->
<input type="file" name="myFile" style="display: none;">
An <input type="file"> is added to the page. It's hidden using CSS by setting its display property to none. This makes sure that the control is hidden, and doesn't take up any space in the browser.
Next, the replacement text box and button are added to the page:
<!-- Fake field to fool the user -->
<input type="text" name="txtFakeText" readonly="true">
<!-- Button to invoke the click of the File Input -->
<input type="button" onclick="HandleFileButtonClick();"
value="Upload File" style="background: red;">
The text box, called txtFakeText is just an ordinary text box, capable of holding simply text. The readonly="true" attribute is used to make sure that the user can't change the contents of this text box directly. Because there is no way to copy the contents of this text box back to the hidden file control, any change the user would make would cause the two HTML controls to get out of sync. By locking the control, the only way the user can select a different file is by using the Browse button again.
The Browse button is a plain HTML button, so you can use any style information you require. In this example, all that is styled is the background color of the control by setting it to red, but you can change whatever you want on this button; font, size, borders, placement, etc. just as you can with most other HTML elements.
This is all that is necessary to have a styled Browse button. Your users will think they are looking at an ordinary file control, while you have now full control over the looks of the button.
Works With
- Internet Explorer 6
Download Files
Where to Next?
Wonder where to go next? You can post a comment on this article.
Links in this Document
| Doc ID | 154 |
| Full URL | https://imar.spaanjaars.com/154/howto-style-the-button-of-a-input-typefile-control |
| Short cut | https://imar.spaanjaars.com/154/ |
| Written by | Imar Spaanjaars |
| Date Posted | 10/01/2003 19:13 |
| Date Last Reviewed | 12/08/2006 14:49 |
| Listened to when writing | Wandering Star by Portishead (Track 5 from the album: Dummy) |
Comments
Talk Back! Comment on Imar.Spaanjaars.Com
I am interested in what you have to say about this article. Feel free to post any comments, remarks or questions you may have about this article. The Talk Back feature is not meant for technical questions that are not directly related to this article. So, a post like "Hey, can you tell me how I can upload files to a MySQL database in PHP?" is likely to be removed. Also spam and unrealistic job offers will be deleted immediately.
When you post a comment, you have to provide your name and the comment. Your e-mail address is optional and you only need to provide it if you want me to contact you. It will not be displayed along with your comment. I got sick and tired of the comment spam I was receiving, so I have protected this page with a simple calculation exercise. This means that if you want to leave a comment, you'll need to complete the calculation before you hit the Post Comment button.
If you want to object to a comment made by another visitor, be sure to contact me and I'll look into it ASAP. Don't forget to mention the page link, or the Doc ID of the document.