input[type="file] custom

<!--html-->
<div class="filebox"> 
    <label for="ex_filename">파일선택</label>
    <input class="upload-name" value="jpg, png, gif" disabled="disabled">  
    <input type="file" id="ex_filename" class="upload-hidden" accept=".jpg, .png, .gif"> 
</div>

<!--css-->
.filebox input[type="file"] {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    border: 0;
}
.filebox label {
    display: inline-block;
    text-align: center;
    width: 90px;
    height: 30px;
    line-height: 30px;
    background-color: #777;
    border: none;
    font-size: 12px;
    color: #fff;
}
.filebox .upload-name {
    display: inline-block;
    padding: .5em .75em;
    font-size: 12px;
    font-family: inherit;
    line-height: normal;
    vertical-align: middle;
    border: none !important;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
}

<!--js-->
<script>
$(function(){ 
    var fileTarget = $('.filebox .upload-hidden'); 
    fileTarget.on('change', function(){ 
        if(window.FileReader){ 
            // modern browser 
            var filename = $(this)[0].files[0].name; 
        } else { 
            // old IE 
            var filename = $(this).val().split('/').pop().split('\\').pop(); 
        } 
        $(this).siblings('.upload-name').val(filename); 
    }); 
});
</script>