Styling <input type="file"> [duplicate]
Solution 1:
The CSS way (base code found here):
<html>
<style type="text/css">
div.fileinputs {
position: relative;
}
div.fakefile {
position: absolute;
top: 0px;
left: 0px;
z-index: 1;
}
div.fakefile input[type=button] {
/* enough width to completely overlap the real hidden file control */
cursor: pointer;
width: 148px;
}
div.fileinputs input.file {
position: relative;
text-align: right;
-moz-opacity:0 ;
filter:alpha(opacity: 0);
opacity: 0;
z-index: 2;
}
</style>
<div class="fileinputs">
<input type="file" class="file" />
<div class="fakefile">
<input type="button" value="Select file" />
</div>
</div>
</html>
Solution 2:
There is no easy cross-browser way to style the input type of files. Therefore there exist solution that even use javascript.
Here is a jQuery plugin you can use to style file types in the cross-browser fashion:
- File Style Plugin for jQuery
Browsers do not let you style file inputs. File Style plugin fixes this problem. It enables you to use image as browse button. You can also style filename field as normal textfield using css. It is written using JavaScript and jQuery.
You can check out the demo here
As also posted on popular ajaxian.com, you can take a look at this too:
- A Cheaky Way to Style an input type=”file”
Shaun Inman has got a lovely little hack that allows you to style file inputs with CSS and the DOM.
These elements are notoriously painful to deal with, and now we have select boxed playing nice on IE, we need something else to fix up :)
Solution 3:
I wrote this jQuery plugin to make it much simpler to style the file input. Use CSS and "fake elements" to get the results you want.
http://github.com/jstnjns/jquery-file
Hope that helps!
Solution 4:
<label for="file" style="/* style this one, as you want */">Upload file</label>
<input id="file" name="file" type="file" style="display:none;">