Applying styles(CSS) on File Input
Styling file input is not as straight forward as a text box or a drop down in HTML Pages. This is because of 2 user interface elements included in this Input type. File Input type is combination of a text box and a browse button.
Selected file path is shown in the text box and browse button is used for choosing the file. Styling is problem because CSS is applied to both of the elements equally which is not desired in normal case.
Common solution of this problem is using another Text and button Inputs and using File input as hidden. See following code which i guess works well in IE but not in Firefox.
<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>
- You can also use File style Plug in for Jquery
which gives not much flexibility but enables you to use image as browse button and you can also style filename field as normal text field using CSS.
For using this plugin, you need to use JQuery and then it is very simple, just use following code to apply style to your file input
$("input[type=file]").filestyle({
image: "choose-file.gif",
imageheight : 22,
imagewidth : 82,
width : 250
});
You need to have your image file with you to set for browse button. Plugin wraps vanilla file input with div. This div has button as background image. Image button is aligned with file inputs browse button. File input is then hidden by setting opacity to zero. Chosen file is shown in normal text input which mimics file input. This text input also inherits file inputs class.
See demo page here: http://www.appelsiini.net/projects/filestyle/demo.html
Refer : http://www.appelsiini.net/projects/filestyle
Most Commented Posts
If you enjoyed this post, please consider to leave a comment or subscribe to the feed and get future articles delivered to your feed reader.
Comments
Hi ,
thanks for your code.
can u share any example working code that would be very helpful for me.
Actually i want to post the form which can upload image , but this jqury plugin , i am able to make browser button as image button, but when i am doing $_POST['filename'], its not available.
source:-
$(function() {
$(“input.file_1″).filestyle({
image: “/expand/smartsite/img/browse_btn.png”,
imageheight : 22,
imagewidth : 82,
width : 300
});
});
.file_1 {
background: #fff;
color: #888;
}
#sidebar {
width: 0px;
}
#content {
width: 770px;
}
please let me know to achieve this.
Thanks in advance
Great solution- thanks