<div class="fancy-file-upload">
    <i class="fa fa-upload"></i>
    <input type="file" class="fancy-control" name="bf_file[]" id="bf_file_<?php echo $i+1 ?>" onchange="jQuery(this).next('input').val(this.value);" />
    <input type="text" class="fancy-control" placeholder="첨부파일을 선택해주세요." readonly="" title="파일첨부 <?php echo $i+1 ?> : 용량 <?php echo $upload_max_filesize ?> 이하만 업로드 가능" />
    <span class="button">첨부파일 #<?php echo $i+1 ?></span>
</div>

 
/* fancy upload
-------------------------------------------------------- */
.frm_input-file-upload {position:relative;height:40px;overflow:hidden;display:block;margin-bottom:3px;}
.fancy-file-upload > span.button {color:#fff;background-color:#333;position: absolute;top: 4px;right: 4px;top:4px;bottom:4px;line-height: 30px;padding: 0 16px;z-index: 10;-webkit-border-radius: 3px;-moz-border-radius: 3px;border-radius: 3px;}
.fancy-file-upload.fancy-file-primary > span.button {background-color:#8AB933 !important;}
.fancy-file-upload.fancy-file-success > span.button {background-color:#4cae4c !important;}
.fancy-file-upload.fancy-file-danger > span.button {background-color:#d43f3a !important;}
.fancy-file-upload.fancy-file-warning > span.button {background-color:#eea236 !important;}
.fancy-file-upload.fancy-file-info > span.button {background-color:#3a8afd !important;}
.fancy-file-upload.fancy-file-default > span.button {color:#666;background-color:rgba(0,0,0,0.1) !important;}
.fancy-file-upload>input[type=text] {background-color:transparent;padding-left: 36px;-webkit-border-radius: 3px;-moz-border-radius: 3px;border-radius: 3px;}
.fancy-file-upload>input[type=file] {width: 100%;height: 100%;cursor: pointer;padding: 8px 10px;position: absolute;-moz-opacity: 0;opacity: 0;z-index: 11;bottom: 0;right: 0;-webkit-border-radius: 3px;-moz-border-radius: 3px;border-radius: 3px;}
.fancy-file-upload > i {position:absolute;top: -1px;width: 42px;height: 42px;color: inherit;line-height: 42px;position: absolute;text-align: center;color:#888;z-index: 10;}
/* fancy-control */
.fancy-control { display: block;width: 100%;height: 40px;padding: 6px 12px;font-size:1em;line-height: 1.42857143;color: #000;background-color: #fff;background-image: none;border: 1px solid #ccc;border-radius: 3px;-webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075);box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075);-webkit-transition: border-color ease-in-out .15s, -webkit-box-shadow ease-in-out .15s;-o-transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s;transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s; }
.fancy-control:focus { border-color: #66afe9;outline: 0;-webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 8px rgba(102, 175, 233, .6);box-shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 8px rgba(102, 175, 233, .6); }
.fancy-control::-moz-placeholder { color: #999;opacity: 1; }
.fancy-control:-ms-input-placeholder { color: #999; }
.fancy-control::-webkit-input-placeholder { color: #999; }
.fancy-control::-ms-expand { background-color: transparent;border: 0; }

<div class="fancy-file-upload">
...
<div class="fancy-file-upload fancy-file-primary">
...
<div class="fancy-file-upload fancy-file-success">
...
<div class="fancy-file-upload fancy-file-danger">
...
<div class="fancy-file-upload fancy-file-warning">
...
<div class="fancy-file-upload fancy-file-info">
...
<div class="fancy-file-upload fancy-file-default">
...