<form>
<div class="custom-file-upload-wrapper">
<label for="file-upload" class="ui-btn custom-file-upload">
Choose File: No file chosen
</label>
<input id="file-upload" name='upload_cont_img' type="file" style="display:none;">
</div>
</form>
.custom-file-upload {
border: 1px solid #ccc;
display: inline-block;
padding: 6px 12px;
cursor: pointer;
}
$(document).ready(function(){
$('#file-upload').change(function() {
var file = $('#file-upload')[0].files[0].name;
$(this).closest('.custom-file-upload-wrapper').find('label').text('Selected File: ' + file);
});
});
This Pen doesn't use any external CSS resources.