Place button on top of button type=file with custom text

Question

I am trying to create the illusion of a custom upload file button as the CSS for <input type='file'/> is limited and a pain. I am currently using the code below:

HTML

<button type="button" class="uploadcontainer"><input type="file" class="docuploadbtn" id="t1url" name="t1url"/>Upload File</button>

CSS

.docuploadbtn {
    opacity: 0;
}

.uploadcontainer {
    width: 100px;
}

The combination of this code shows a button that behind it has a "hidden" upload button at the top but this pushes the text "Upload File" underneath this making a larger than normal size button.

Here is what it looks like now:

And this is what I want it to look like:

What can I try next?

Answer 1

I found a solution to the problem of creating a custom upload button:

HTML

<input type="button" class="upbtn" value="Upload File"/>
<input type="file" class="docuploadbtn" id="t1url" name="t1url"/>

CSS

.upbtn {
    width: 100px;
    display: inline-block;
}

.docuploadbtn {
    visibility: hidden;
    display: inline-block;
}

JQuery

$('.upbtn').click(function(){
    $(this).siblings('.docuploadbtn').click();
});