Styling File Upload Input Box in CSS
CSS is a very important part in optimizing your HTML source code as well as Search Engine Optimization, because it cut down most of your HTML source code and make it very clear.
Some days ago i was styling my HTML file input box in CSS, but strange it was not working. Although CSS works very well on other input boxes, like text, password, checkboxes and radio buttons. So i started searching on google but shocked to know that “The ‘Browse’ button, especially, is completely inaccessible to CSS manipulation”. I found some methods to style File Upload Box but all of them are using lot of Javascript.
Then i started brainstorming and after 5 hours of continues struggle make me successfull in making my own method with very little javascript (only single line) and working on almost all browsers. You can see final result of that input box in following image:
You will put this HTML code in your page where you want to show custom file input box:
-
-
<div id="divinputfile"> <input name="filepc" type="file" size="30" id="filepc" onchange="document.getElementById(‘fakefilepc’).value = this.value;"/><div id="fakeinputfile"><input name="fakefilepc" type="text" id="fakefilepc" /></div>
-
-
</div>
And put this CSS code in your style sheet file:
-
-
#divinputfile{
-
-
background:url(upload_file.gif) no-repeat 100% 1px;
-
-
height:28px;
-
-
width:385px;
-
-
margin:0px;
-
-
}#divinputfile #filepc{
-
-
opacity: 0.0;
-
-
-moz-opacity: 0.0;
-
-
filter: alpha(opacity=00);
-
-
font-size:18px;
-
-
}
-
-
#fakeinputfile{
-
-
margin-top:-28px;
-
-
}
-
-
#fakeinputfile #fakefilepc{
-
-
width:265px;
-
-
height:22px;
-
-
font-size:18px;
-
-
font-family:Arial;
-
-
}
And finally place this upload_file.gif image with your files.
That’s All!
Author: Burhan Khan
Very useful information
I see there are realy good tips. I am going to use some of them
Very nice
btw very good tips i will use some of them. Some i did not knew.
thanks just what i was looking for.
I dont need the textbox length much more. How to reduce the length. The length is adjusted but distance between textbox and upload_file.gif did not differ.
For people worried about the ever increasing Mac user base.
This solution doesn’t seem to work on
Mac FF 2.0.0.14
Works but doesnt look right on
Mac Opera 9
Works Fine
Mac Safari 3.1.1
this is a very good script u have take 5 hour to make it i also have take 5 hours to reach it and test it because i test frist alot of anther scripts which are very bad
Hi, thanks for the simple script! I couldn’t get it to work in ie6 at first, until i put the real input below the fake one in the html:
i tweaked the css a bit to get things back in place again- didn’t have time to do it completely right, but you get the idea:
#divinputfile{
background:url(file_upload.jpg) no-repeat 100% 1px;
height:22px;
width:309px;
margin:0px;
position: relative;
overflow: hidden;
}
#divinputfile:hover {
background-position: 100% -20px;
}
#divinputfile #filepc{
opacity: 0.8;
-moz-opacity: 0.8;
filter: alpha(opacity=80);
position: absolute;
right: 0;
top: 0;
height: 22px;
width: 291px;
}
#fakeinputfile{
margin-top:18px;
}
#fakeinputfile #fakefilepc {
font-family:Arial;
margin-top: -17px;
}
My own version (in a unpublished website) is working in FF2.x, IE6, IE7, Opera and Safari (all on pc)
For some reason FF on Mac won’t work unless you use:
onchange=”document.getElementById(‘fakefilepc’).value = document.getElementById(‘filepc’).value;”
It seems like the onchange event is losing the scope of “this” otherwise.
Your blog is so nice and very interesting with the content. It looking great and describes the most useful things. Thanks for sharing.
This is easy to follow but I dont know why I still see the default \"browse\" button over top of my graphic. What did I do wrong?
I’m IE6…. sorry missed that before.
Thanks man!
Works like a charm (in FF 3 and safari 4)
Had some minor changes made though.
Used position:relative in stead of negative margins, and z-index for consistency. But it works great in newer browsers. (Not tested in IE)
Hi this example is grt, but while using the upload via image , how to get the full path in to the text box
like “c:/images/test.gif”
currently it displays only “test.gif”
thanks
Brilliant!
NOTE: In .NET for some reason having the input with runat=server overrides the css. Putting the css inline fixed it for me.
Can\’t seem to get it to work. – Arunabh Das
Nice,
It really help me to figure out my input(type=’file’)css problem.
Thanks,
WJ
Nice. Thanks for the article
It really help me to figure out my input(type=’file��?css problem.
Nice,
It really help me to figure out my input
I am impressed by reading your article. These are great tips. I really enjoyed the post! thanks for sharing helpful tips.
Excellent article.
Greatly helped. Thanks for sharing with us.
Hey great example, thank you
Great help while working on webpage through css or div id. I cleared my doubt. Thanks a ton.
set height for the input because it without it it will float when the site size is changed
Ctrl + Scrol
use:
#divinputfile #filepc{
opacity: 0.0;
-moz-opacity: 0.0;
filter: alpha(opacity=00);
font-size:18px;
height:28px;
}
Nice!
But how do you upload file,if you use
input file(not have runat=server)
thank you
Hey thanks for that tip its working like magic
Thanks a lot
Hermes is the famous fashion brand of France
Very Nice tips
I have the form working and it looks great, however I do not get the entire file path in my field only the file name.
Im glad I came across onto it. Have a good day And Check me out
Hi,
When mouse is over browse button how can I show the Hand? The following (“cursor:pointer;”) did not work in Firefox. Any idea ? (This is probably because, it stayed under other controls)
#divinputfile #filepc
{
opacity: 0.0;
-moz-opacity: 0.0;
filter: alpha(opacity=00);
font-size:18px;
margin-left:95px;
cursor:pointer;
}
Good to find this website. I liked optimizing part in CSS in context with HTML. thanks for providing the information.
Date Hello, I have browsed most of your posts. This post is probably where I got the most useful information for my research. Thanks for posting, maybe we can see more on this. Are you aware of any other websites on this subject
A very interesting and informative article.
Its help me very very much
@Ani
Hi! Would you mind if I share your blog with my facebook group? There’s a lot of folks that I think would really appreciate your content. Please let me know. Thank you
I am just looking for this, thanks very much!
Thanks for the article I will go and try this. I was really surprised when I tried to style the upload box and it didn’t work, and it was very hard to find any information on the web! Just hoping it works now!
@Patrick
is not workinf for IE …
Perfect piece of work you have done, this web site is really cool with wonderful info .