JSFiddle - React, Tailwind, and code Playground

HTML

<form class="example" action="#">
<div class="fileinputs">
    <input type="file" class="file hidden">
<div class="fakefile"><input id="lol"><img src="http://www.quirksmode.org/dom/pix/button_select.gif"></div></div>
</form>

CSS

form.example input.file.hidden {
    opacity: 0;
    position: relative;
    text-align: right;
    z-index: 2;
}

form.example input.file {
    margin: 0;
    width: 300px;
}

form.example input {
    background: url("http://www.quirksmode.org/dom/pix/input_boxes.gif") no-repeat scroll 0 -58px transparent;
    border: medium none;
    height: 20px;
    padding-left: 3px;
    padding-top: 3px;
    width: 241px;
}

form.example div.fakefile input {
    margin-bottom: 5px;
    margin-left: 0;
}

form.example input {
    background: url("http://www.quirksmode.org/dom/pix/input_boxes.gif") no-repeat scroll 0 -58px transparent;
    border: medium none;
    height: 20px;
    padding-left: 3px;
    padding-top: 3px;
    width: 241px;
}

.fakefile{    margin-top: -25px;}

JavaScript

$('[type=file').mousedown(function(){
    $(this).click();
});
$('[type=file]').change(function(){
    var testval = $(this).val().replace(/C:\\fakepath\\/i, '');
    $('#lol').val(testval);
});