Custom File Input
var noFileMessage = 'No file chosen';
$('.custom-file .btn').click(function () {
$(this).siblings('input[type=file]').focus().click()
})
$('.custom-file input[type=file]').change(function () {
var fileName = $(this).val().split('\\').pop();
var fileNameArea = $(this).siblings('.file-name');
if (fileName.length)
fileNameArea.text(fileName)
else
fileNameArea.text(noFileMessage)
})
<div class="custom-file">
<input type="file" required/>
<span class="btn form-btns less-padd">Choose File</span>
<span class="file-name">No file chosen</span>
</div>
.custom-file {
font-size: 16px;
clear: both;
width: 100%;
display: table;
font-family:'calibri';
input[type=file] {
display: none;
}
.btn {
float: left;
margin-right: 12px;
background-color: #5591dc;
padding: 5px 20px;
color: #fff;
border-radius: 0;
cursor:pointer;
}
}
.file-name {
padding: 4px 5px 0 0;
float: left;
}