We have orange rounded buttons as a standard on our site. For our purposes, we switched everything over to use an anchor tag, instead of input type=button. The exception to this was the File Upload Control. For security reasons, you can't write your own, and since buttons in IE can't be rounded with pure CSS, I decided to use a combination of other people's solutions. I set the Opacity to 0, for the real File Input, and the z-index to 999. For the fake anchor and textbox, which are styled properly, I moved them to the same space that the File Input takes up, but they're underneath it in the layers. So, the File Input doesn't show up, but when people think they're clicking the anchor tag, they're really getting the File Input.
I've tested this in the browsers that we require support for, and it's definitely functional and looks good. I'm curious as to whether this has any glaring holes that I've missed.
<div class="editor-field" style="white-space: nowrap;">
<input type="file" name="file" id="file" class="hide-file-input" />
<input type="text" id="file-fake" class="k-textbox fileinput-textbox" />
<span class="file-button-wrapper"><a class="button" id="fileButton">Browse</a></span>
</div>
Here is the associated script:
<script type="text/javascript">
$(document).ready(function () {
$('#file').change(function (e) {
$('#file-fake').val($('#file').val());
});
});
</script>
And finally, here is the relevant CSS for positioning and hiding these elements:
input.fileinput-textbox {
float: left;
position: absolute;
width: 158px !important;
left: 117px;
display: inline-block;
}
.file-button-wrapper {
float: left;
background-color: #ffffff;
position:absolute;
margin: 0;
padding: 5px;
width: 70px;
height: 20px;
left: 273px;
display: inline-block;
}
.hide-file-input {
opacity: 0;
filter: alpha(opacity = 0);
-ms-filter: "alpha(opacity=0)";
z-index: 999;
line-height: 0;
position: relative;
overflow:hidden;
width: 240px;
}
The only drawback I've found is that the script only shows the file name, not the path, like the real File Input would. This isn't a problem for our business unit, though, so I haven't even checked to see if I could show the full path. (I think it's a benefit, personally). Other solutions seem to want to throw the File Input off the screen altogether, but I couldn't see a reason not to do it this way.
