JavaScript: Input File Type Click Trick

HTML

<div class="file-test-area">
    <div class="file-input wrapper">
        <input id="inpFile" type="file" class="file-input control" />
        <label id="inpFileOutput0" for="inpFileButton" class="file-input output">Click Here</label>
    </div>
</div>

CSS

body {
    height: 100%;
    margin: 0;
    padding: 0;
    border: 0;
    font-size: 100%;
    font: inherit;
    vertical-align: baseline;
    width: 100%;
}
/*input[type="file"] { opacity: .25 !important; background: #00A; }*/
.file-test-area {
    border: 1px solid;
    margin: .5em;
    padding: 1em;
}
.file-input {
    cursor: pointer !important;
}
.file-input * {
    cursor: pointer !important;
    display: inline-block;
}
.file-input.wrapper {
    display: inline-block;
    font-size: 14px;
    height: auto;
    overflow: hidden;
    position: relative;
    width: auto;
}
.file-input.control {
    -moz-opacity:0 ;
    filter:alpha(opacity: 0);
    opacity: 0;
    
    height: 100%;
    position: absolute;
    text-align: right;
    width: 100%;
    z-index: 2;
}
.file-input.content {
    position: relative;
    top: 0px;
    left: 0px;
    z-index: 1;
}
.file-input.output {
    background-color: #FFC;
    font-size: .8em;
    padding: .2em .2em .2em .4em;
    text-align: center;
    width: 10em;
}
.file-input.button {
    border: none;
    font-weight: bold;
    margin-left: .25em;
    padding: 0 .25em;
}

JavaScript

var inpFile = document.getElementById("inpFile"),
    inpFileOutput = document.getElementById("inpFileOutput0"),
    inpFileButton = document.getElementById("inpFileButton0");

// simply how to grab each input as needed
console.log(inpFile, inpFileOutput, inpFileButton);

// the following will actually asign the label of each input area the functionality of collecting selected file names

    //inpFile.relatedElement = inp[i].parentNode.getElementsByTagName('label')[0];
    inpFile.onchange /*= inp[i].onmouseout*/ = function () {
        this.relatedElement.innerHTML = this.value;
};