How to access the properties of a file upload button?

Question

Hi,

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

Assuming you want to change the button's text, here's one tutorial on how to do that:

http://www.quirksmode.org/dom/inputfile.html

If it's just the plain CSS properties like colour/border/etc, you already have the answer, you just need to check stuff to find out why it's not working.

Answer 2

You use DOM/JavaScript, e.g:

document.getElementById("id").style.property="value"

Answer 3

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>