Styling File Upload Input Box in CSS

Posted April 2008 by admin

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:

file_upload.jpg

You will put this HTML code in your page where you want to show custom file input box:

  1.  
  2. <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>
  3.  
  4. </div>

And put this CSS code in your style sheet file:

  1.  
  2. #divinputfile{
  3.  
  4.  background:url(upload_file.gif) no-repeat 100% 1px;
  5.  
  6.  height:28px;
  7.  
  8.  width:385px;
  9.  
  10.  margin:0px;
  11.  
  12. }#divinputfile #filepc{
  13.  
  14.  opacity: 0.0;
  15.  
  16.  -moz-opacity: 0.0;
  17.  
  18.  filter: alpha(opacity=00);
  19.  
  20.  font-size:18px;
  21.  
  22. }
  23.  
  24. #fakeinputfile{
  25.  
  26.  margin-top:-28px;
  27.  
  28. }
  29.  
  30. #fakeinputfile #fakefilepc{
  31.  
  32.  width:265px;
  33.  
  34.  height:22px;
  35.  
  36.  font-size:18px;
  37.  
  38.  font-family:Arial;
  39.  
  40. }

And finally place this upload_file.gif image with your files.

That’s All!

Click here to see demo!

Author: Burhan Khan

Posted in: CSS Tricks |

8 Responses to “Styling File Upload Input Box in CSS”

  1. crusader Says:
    April 16th, 2008 at 4:52 am

    Very useful information :) I see there are realy good tips. I am going to use some of them

  2. Computer jobs Says:
    April 24th, 2008 at 10:26 am

    Very nice ;) btw very good tips i will use some of them. Some i did not knew.

  3. Marty Says:
    May 9th, 2008 at 6:52 am

    thanks just what i was looking for.

  4. Senthil Kumar Says:
    May 13th, 2008 at 6:24 am

    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.

  5. David Says:
    May 16th, 2008 at 2:04 pm

    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

  6. baraa Says:
    June 17th, 2008 at 9:16 am

    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

  7. Patrick Says:
    June 19th, 2008 at 9:20 am

    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)

  8. Clearpage Says:
    June 19th, 2008 at 1:01 pm

    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.

Leave a Reply