###DEMO(CODEPEN)
デモはこちら
###HTML
<input type="text" id="attach_file_name" class="attach_file_name" readonly/>
<label for="attach_file" class="attach_file_button">Browse
<input type="file" name="attach_file" onchange="onchange_attach_file(this)" id="attach_file" class="file_input"/>
</label>
###CSS
input.file_input {
display: none;
}
input.attach_file_name {
padding: 4px;
}
/* like button */
label.attach_file_button {
display:inline-block;
background: #ccc;
border: outset 1px #ccc;
padding: 4px;
cursor: pointer;
}
###JavaScript
function onchange_attach_file(source) {
document.getElementById('attach_file_name').value = source.value;
}