A file input button for all browsers, is this possible?
Solution 1
I can't remember the source of the technique but this seems to be cross-browser. Tested in:
- Google Chrome 9
- FireFox 3.6
- Internet Explorer 6-9
- Opera 10
- Safari for Windows
Here is the complete code:
HTML:
<div>
<button><!-- this is skinnable -->Pick a file ...</button>
<input type="file" />
</div>
CSS:
div
{
position:relative;
width: 100px;
height: 30px;
overflow:hidden;
}
div button
{
position: absolute;
width: 100%;
height: 100%;
}
div input
{
font: 500px monospace; /* make the input's button HUGE */
opacity:0; /* this will make it transparent */
filter: alpha(opacity=0); /* transparency for Internet Explorer */
position: absolute; /* making it absolute with z-index:1 will place it on top of the button */
z-index: 1;
top:0;
right:0;
padding:0;
margin: 0;
}
The idea is to make the <input type="file" />
transparent and place it on top of some style-able content (a <button>
in this case). When the end user clicks the button she will actually click the <input type="file" />
.
Solution 2
The simple way to use a "label" tag and "for" property. Like this http://jsfiddle.net/Txrs6/ but in this case we don't see a chosen file. CODE
<label for="inputFile" class="col-sm-3" style="padding-left: 0px;"><a class="btn btn-info">Выбрать...</a></label>`
<input style="display: none;" type="file" id="inputFile">
Another way with js http://jsfiddle.net/PZ5Ep/
Christian Fazzini
Updated on June 06, 2022Comments
-
Christian Fazzini almost 2 years
Is it possible to use uploadify to allow any user to select a file from the file dialogue and insert it into the file input element of a form? I only need to use uploadify as a way to style the "upload button" as an image.
I have tried other approaches here, here and here. All are not compatible with all browsers.
What else can I use / do to have my file input element as an image?
I would like to have my file input button to look consistent in all browsers.