본문 바로가기
html

input type="file" 파일 첨부 폼

by 바나냥 2020. 4. 3.
.file-wrap {overflow: hidden;}
.file-wrap .stit {width: 75px; padding-top: 3px;}
.file {position: relative; vertical-align: middle;}
.file label {width: 100%; border: 1px solid #d8d8d8; display: inline-block; line-height: 36px; padding: 0 15px; border-radius: 5px; height: 36px;}
.file input[type="file"] {width: 0.1px; height: 0.1px; opacity: 0; overflow: hidden; position: absolute; z-index: -1;}
.file-wrap .file-list {}
.file-wrap .file-list ul {padding: 0;}
.file-wrap .file-list ul li {margin-top: 10px; list-style: none;}
.file-wrap .file-list ul li .js-file-name {margin-right: 8px;}
.file-wrap .file-list ul li i {text-indent: -9999px; cursor: pointer;}​
<div class="file-wrap">
  <span class="stit fl">파일첨부</span>
  <span class="fl">                                            
  <span class="file">
  	<input type="file" class="inputfile" name="file" id="file"/><label for="file"><span class="fileInfo">파일을 선택해주세요.</span></label>
  </span>
  <div class="file-list">
    <ul>
    	<li><span class="js-file-name">001.gif</span><i class="ic-delete">파일삭제</i></li>
    </ul>
  </div>
  <p class="dot">첨부파일은 총 100Mbyte 미만으로 등록해주세요.</p>
  <p class="dot">파일첨부는 jpg / gif 형식으로만 가능합니다.</p>
  </span>
</div>

댓글