Custom file field

custom-file.css

.custom-file-upload {
    width: 100%;
    position: relative;
    padding: 0px;
}

.custom-file-upload:before {
    content: 'Browse';
    position: absolute;
    right: 0px;
    top: 0px;
    cursor: pointer;
    background: #000 url(arrow.png) no-repeat 70px 7px;
    height: 40px;
    padding: 9px 45px 9px 10px;
}

*>.custom-file-upload input.fake-file {
    z-index: 998;
    text-wrap: none;
}

*>.custom-file-upload input[type=file]{
    position: absolute;
    top: 0;
    left: -500px;
    margin: 0;
    width: 1000%;
    background: transparent;
    z-index: 999;
    margin: 0;
    text-wrap: none;
    opacity: 0;
}

custom-file.html

<div class="custom-file-upload">
    <input type="text" class="fake-file" placeholder="Select MP3" name="mp3">
    <input id="track_track" name="track[track]" placeholder="Browse" required="required" type="file">
</div>

custom-file.js

$('body').on("change", ".custom-file-upload input:file", function () {
            $(this).closest('.custom-file-upload').find('.fake-file').val($(this).val().split('\\').pop());
        });