JSFiddle - React, Tailwind, and code Playground

HTML

<div class="inp_field_12" onmousemove="file_ho(event,this,1)"><span>browse</span>

    <input id="file_1" name="file_1" type="file" value="" onchange="file_ch(1)">
</div>
<div id="result_1" class="result"></div>

CSS

:root input:focus, :root button:focus {
    outline: none;
}
.inp_field_12 {
    position:relative;
    overflow:hidden;
    float: left;
    width: 130px;
    height: 30px;
    background: orange;
}
.result {
    float: left;
    width: 400px;
    height: 30px;
    border: 1px solid purple;
}
.inp_field_12 span {
    position: absolute;
    width: 130px;
    font-family:'Calibri', 'Trebuchet MS', sans-serif;
    font-size:17px;
    line-height:27px;
    text-align:center;
    color:#555;
}
.inp_field_12 input[type='file'] {
    cursor:pointer;
    cursor:hand;
    position: absolute;
    top: 0px;
    right: 0px;
    -moz-opacity:0;
    filter:alpha(opacity: 0);
    opacity: 0;
    outline: none;
    outline-style:none;
    outline-width:0;
    ie-dummy: expression(this.hideFocus=true);
}
.inp_field_12:hover {
    background-position:-140px -35px;
}
.inp_field_12:hover span {
    color:#fff;
}

JavaScript

function file_ho(e, o, a) {
    e = window.event || e;
    var x = 0,
        y = 0;
    if (o.offsetParent) {
        do {
            x += o.offsetLeft;
            y += o.offsetTop;
        } while (o = o.offsetParent);
    }
    var x1 = e.clientX || window.event.clientX;
    var y1 = e.clientY || window.event.clientY;
    var le = 100 - (x1 - x);
    var to = 10 - (y1 - y);
    getObj('file_' + a).style.marginRight = le + 'px';
    getObj('file_' + a).style.marginTop = -to + 'px';
}

function file_ch(x) {
    var val = getObj('file_' + x).value;
    getObj('result_' + x).innerHTML = val;
}

function getObj(x) {
    return document.getElementById(x);
}