Question

can you show me how to assign css properties to the button that is of type=file,say:

<input type='file'  name='coolFile'> 

I know that in css you need to do this:

  input[type=file]{      background:#ccf; //and so on } 

How do I assign values for the button?

Answer 1

Unfortunately, mainstream browsers do not allow designers to directly style file input fields. You can consider this a ‘security feature’ because users could potentially be tricked into uploading files if the file input field is styled in a tricky way.

There is a solution that involves creating a second input field, and hiding the actual file input behind it. The following was lifted from http://www.quirksmode.org/dom/inputfile.html:

div.fileinputs {     position: relative; }  div.fakefile {     position: absolute;     top: 0px;     left: 0px;     z-index: 1; }  input.file {     position: relative;     text-align: right;     -moz-opacity:0 ;     filter:alpha(opacity: 0);     opacity: 0;     z-index: 2; }  <div class='fileinputs'>     <input type='file' class='file' />     <div class='fakefile'>         <input />         <img src='search.gif' />     </div> </div>