input[type=file] 커스텀

<dl>
    <dt>파일형식 <strong class="required">*</strong></dt>
    <dd>
        <div class="checkbox-wrap js-checkbox-wrap">
            <div class="checkbox-group">
                <input type="checkbox" id="attach_1" name="">
                <label for="attach_1">강연원고</label>
            </div>
            <div class="checkbox-group">
                <input type="checkbox" id="attach_2" name="">
                <label for="attach_2">약력</label>
            </div>
            <div class="checkbox-group">
                <input type="checkbox" id="attach_3" name="">
                <label for="attach_3">강의 슬라이드</label>
            </div>
        </div>
        <div class="attach-file-con js-attach-file-con">
            <input type="file" id="script-attach" name="attachment[]" class="hide" multiple>
            <input class="form-control" value="" placeholder="원고를 등록해주세요" readonly />
            <label for="script-attach" class="btn btn-form color-type4 btn-upload btn-upload-thumb">파일 첨부</label>
        </div>
        <div class="attach-file-con js-attach-file-con">
            <input type="file" id="profile-attach" name="attachment[]" class="hide" multiple>
            <input class="form-control" value="" placeholder="약력을 등록해주세요" readonly />
            <label for="profile-attach" class="btn btn-form color-type4 btn-upload btn-upload-thumb">파일 첨부</label>
        </div>
        <div class="attach-file-con js-attach-file-con">
            <input type="file" id="slide-attach" name="attachment[]" class="hide" multiple>
            <input class="form-control" value="" placeholder="강의 슬라이드를 등록해주세요" readonly />
            <label for="slide-attach" class="btn btn-form color-type4 btn-upload btn-upload-thumb">파일 첨부</label>
        </div>
    </dd>
</dl>

.attach-file-con{display: none;margin-top: 10px;}
.attach-file-con input[type="file"]{overflow: hidden;position: absolute;width: 0;height: 0;padding: 0;border: 0;}
.btn.btn-form{width: 100%;padding: 10px;font-size: 1.8rem;color: #fff;}
.attach-file-con .btn-form{margin-top: 5px;margin-bottom: 0;}

/* checkbox, radio */
.checkbox,
.radio{
	margin: -5px -10px;
}
.checkbox-inline,
.radio-inline{
	display: inline-block;
	margin: 5px 10px;
}
.checkbox-inline input,
.radio-inline input{
	display: inline-block;
	margin-top: -1px;
	vertical-align: middle;
} 
.checkbox-wrap,
.radio-wrap{
	margin: -5px -10px;
}
.checkbox-group,
.radio-group{
	display: inline-block;
	position: relative;
	margin: 5px 10px;
	vertical-align: top;
}
.checkbox-group.w-full,
.radio-group.w-full{
	width: 100%;
}
.checkbox-wrap [type="checkbox"]+ label{
	font-weight: 400;
	color: #232b3e;
}
.checkbox-wrap [type="checkbox"]:checked, 
.checkbox-wrap [type="checkbox"]:not(:checked){
	position: absolute;
	left: -9999px;
}
.checkbox-wrap [type="checkbox"]:checked + label, 
.checkbox-wrap [type="checkbox"]:not(:checked) + label{
	display: inline-block;
	position: relative;
	padding-left: 35px;
	padding-top: 3px;
	padding-bottom: 5px;
	cursor: pointer;
}
.checkbox-wrap [type="checkbox"]:checked + label:before,
.checkbox-wrap [type="checkbox"]:not(:checked) + label:before{
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	width: 26px;
	height: 26px;
	border: 2px solid #d0d0db;
	background: #fff;
}
.checkbox-wrap [type="checkbox"]:checked + label:after, 
.checkbox-wrap [type="checkbox"]:not(:checked) + label:after{
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	width: 26px;
	height: 26px;
	border: 2px solid #9ac426;
	background-color: #9ac426;
	background-repeat: no-repeat;
	background-position: center;
	background-image: url('/include/img/sub/ic_radio_chk.png');
	background-size: 12px;
	-webkit-transition: all 0.3s ease;
	transition: all 0.3s ease;
}
.checkbox-wrap [type="checkbox"]:not(:checked) + label:after,
.radio-wrap [type="radio"]:not(:checked) + label:after{
	opacity: 0;
}
.checkbox-wrap [type="checkbox"]:checked + label:after,
.radio-wrap [type="radio"]:checked + label:after{
	opacity: 1;
}

.radio-wrap [type="radio"]+ label{
	font-weight: 400;
	font-size: 1.8rem;
}
.radio-wrap [type="radio"]:checked, 
.radio-wrap [type="radio"]:not(:checked){
	position: absolute;
	left: -9999px;
}
.radio-wrap [type="radio"]:checked + label, 
.radio-wrap [type="radio"]:not(:checked) + label{	
	display: inline-block;
	position: relative;
	padding-left: 35px;
	padding-top: 4px;
	padding-bottom: 4px;
	cursor: pointer;
}
.radio-wrap [type="radio"]:checked + label:before, 
.radio-wrap [type="radio"]:not(:checked) + label:before{
	content: '';
	position: absolute;
	left: 0;
	top: 0;
	width: 26px;
	height: 26px;
	border-radius: 50%;
	border: 2px solid #d0d0db;
	background: #fff;
}
.radio-wrap [type="radio"]:checked + label:after, 
.radio-wrap [type="radio"]:not(:checked) + label:after{
	content: '';
	width: 26px;
	height: 26px;
	position: absolute;
	top: 0;
	left: 0;
	background-color: #9ac426;
	border: 2px solid #9ac426;
	background-repeat: no-repeat;
	background-position: center;
	background-image: url('/include/img/sub/ic_radio_chk.png');
	background-size: 12px;
	border-radius: 50%;
	-webkit-transition: all 0.3s ease;
	transition: all 0.3s ease;
}

/* form */
.form-control{
	display: inline-block;
	height: 50px;
	border-radius: 0;
	border-color: #cccccc;
	font-size: 1.8rem;
	font-weight: 400;
	vertical-align: middle;
}
.form-control::placeholder{
	color: #b2b2b2 !important;
	font-weight: 300;
}
.form-control:disabled,
.form-control[readonly],
.regi-form .form-control:disabled,
.regi-form .form-control[readonly]{
	background-color: #f9f9f9;
	border: 1px solid #d2d0ec;
}

<script>
$(document).ready(function(){
	$('.js-checkbox-wrap input[type=checkbox]').on('change', function(){
		if($(this).is(':checked') == true){
			var cnt = $(this).parent('div').index();
			$('.js-attach-file-con').eq(cnt).show();
		}else if($(this).is(':checked') == false){
			var cnt = $(this).parent('div').index();
			$('.js-attach-file-con').eq(cnt).find('input.form-control').val('');
			$('.js-attach-file-con').eq(cnt).hide();
		}
	});
	$('.js-attach-file-con > input[type=file]').on('change', function(){
		var filePath = $(this).val()
			fileName = filePath.split('\\'),
			fileName = fileName[fileName.length - 1];
			fileInput = $(this).next('.form-control');
		fileInput.val(fileName);
	});
});
</script>