JSFiddle - React, Tailwind, and code Playground

by Vitaliy

HTML

<form action='' method='get'>
    <input type='file' name='some_file' placeholder='placeholder' />
    <input type='submit' />
</form>

CSS

.file_select_btn span{
    display:inline-block;
    line-height:1.5em;
    height:1.5em;
    border:1px solid black;
    padding:0 10px;
}

JavaScript

var inp = document.querySelector('input[type="file"]');
inp.style.display = 'none';
var btn = document.createElement('span');
btn.innerHTML = '<span>Загрузить файл</span>';
var select = document.createElement('span');
select.innerHTML = '<i>' + inp.placeholder + '</i>';
btn.className = 'file_select_btn';
select.className = 'file_select_inp';
inp.parentNode.insertBefore(btn, inp);
btn.appendChild(select);
btn.onclick = function(){
    inp.click();
    inp.onchange = function(){
        select.innerHTML = this.value || this.placeholder;
    }
}