JSFiddle - React, Tailwind, and code Playground
HTML
<input type="file" class="btn" />
<input type="text" class="pseudo_field" />
<input type="button" class="pseudo_btn" value="Выберите файл" />
CSS
.btn {
display: none;
}
.pseudo_field {
border: 1px solid #900;
padding: 3px 4px;
}
.pseudo_btn {
border: 1px solid #900;
padding: 2px 4px 2px 20px;
background: url(http://swandog46.geekstogo.com/res/images/file.bmp) 2px 50% no-repeat;
}
JavaScript
var fileField = $('.btn');
var pseudoB = $('.pseudo_btn');
var pseudoF = $('.pseudo_field');
pseudoB.click(function(){
fileField.trigger('click'); // или просто fileField.click();
});
fileField.change(function(){
var fileName = $(this).val();
pseudoF.val(fileName);
pseudoB.val('Файл выбран!');
});