file input 커스텀하기 html/css/js

HTML

<div class="filebox">

<input type="file" id="file">

<input class="upload-name"readonly>

<label for="file">파일 찾아보기</label>

</div>

 

CSS

/*파일박스*/

.filebox input[type="file"] {

position: absolute;

width: 0;

height: 0;

padding: 0;

overflow: hidden;

border: 0;

}

.filebox label {

display: inline-block;

background: #333;

color: #fff;

font-size: 16px;

cursor: pointer;

height: auto;

border-radius: 8px;

font-weight: 400;

width: 140px;

height: 40px;

line-height: 40px;

text-align: center;

margin-left: 20px;

margin-bottom: 0;

}

.filebox .upload-name {

display: inline-block;

font-size: 18px;

padding: 10px;

border: 1px solid #ddd;

border-radius: 8px;

width: 300px;

height: 40px;

line-height: 40px;

color: #ccc;

overflow: hidden;

}

 

JS

 

<script type="text/javascript">

$(document).ready(function() {

var fileTarget = $('#file');

fileTarget.on('change', function() { // 값이 변경되면

var cur = $(".filebox input[type='file']").val();

$(".upload-name").val(cur);

});

});

</script>