Can we change <input type="file"> style? [duplicate]

Question

I tried to change the HTML form, input type file. Here is my code:

HTML, form id = form

<input class="upload_file" type="file" id="file" name="file" />

.CSS

I tried both:
.upload_button{
  background: url('../images/upload_btn_bg.png') no-repeat;
  width: 200px; 
  height: 40px;
}

#form input[type=file]{
  background: url('../images/upload_btn_bg.png') no-repeat;
  width: 200px; 
  height: 40px;
}

None of both of those methods works. I did see from some website, like facebook, youtube, google or twitter, they have different style. Wonder how they do it.

Answer 1

You can't do anything with input type file (other than huge hacks). I know this sounds horrible, but the web standards still haven't come up with a solution for that.

What I would suggest though, is that you used something more flexible, such as swfUpload, which let's you change stiles, and also check for file size prior to uploading.

Some neat examples of it can be found here

Hope this helps you

Answer 2

For example, try this variant http://www.quirksmode.org/dom/inputfile.html

Answer 3

Best hack ever. Input file HTML:

<input type="file" class="hide" id='inputFile' />
<a href="#" id="triggerFile" class="btn btn-primary">Browse File</a>

using jQuery:

$('#triggerFile').on('click', function(e){
        e.preventDefault()
        $("#inputFile").trigger('click')
    });

Answer 4

Why don't you just put the css to display: none and then trigger this button with another button? This can be easily done with javascript and then you can style the button yourself completely

Here's an example of how to trigger a button with another, but this is just one of many ways: One button firing another buttons click event