input file 커스텀

See the Pen custom input file by publisher.kim (@publisherkim) on CodePen.

 

 

 

html

<div class="filebox">
    <input class="file_input" placeholder="첨부파일" readonly>
    <button>찾아보기</button><input type="file">
</div>

 

css

/* custom file */
.filebox { position: relative; width: 100%; }
.filebox .file_input { display: inline-block; height: 40px; padding: 0 10px; vertical-align: middle; border: 1px solid #d9d9d9; width: calc(100% - 80px); color: #333; outline: none !important; box-sizing:border-box;}
.filebox .file_input::-webkit-input-placeholder { color: #b5b5b5; }
.filebox .file_input:-ms-input-placeholder { color: #b5b5b5; }
.filebox .file_input::-ms-input-placeholder { color: #b5b5b5; }
.filebox .file_input::-moz-placeholder { color: #b5b5b5; }
.filebox .file_input::placeholder { color: #b5b5b5; }
.filebox button { display: inline-block; width: 80px; color: #adadad; vertical-align: middle; background-color: #fff; cursor: pointer; height: 40px; border: 1px solid #d9d9d9; text-align: center; line-height: 40px; position: absolute; right: 0; top: 0; border-left: 0; cursor: pointer; }
.filebox input[type="file"] { position: absolute; display: inline-block; width: 100%; height: 40px; top: 0; left: 0; opacity: 0; cursor: pointer; }

 

js * jquery  필요

$(document).on('change', ".filebox input[type='file']", function(){
        var fileName = $(this).val();
        $(this).siblings(".file_input").val(fileName);
 });