[2019.10.30] input type file 커스터마이징 방법

input type file을 쓰면, 각 브라우저마다 아래와 같이 나타나게 된다.

<input type='file' />

 

이처럼 input type을 file로 사용하는 태그는, 브라우저 내부에 정해진 대로 나타나기 때문에, 해당 디자인을 직접 변경할 수가 없다.

대신 이 태그를 숨기고, 직접 만든 태그 요소에 input file태그가 동작하도록 할 수 있다.

#HTML

<div class="filebox"> 
  <label for="ex_file">업로드</label> 
  <input type="file" id="ex_file"> 
</div>

 

#css

.filebox label { 
  display: inline-block; 
  padding: .5em .75em;
  color: #999;
  font-size:inherit;
  line-height: normal;
  vertical-align: middle;
  background-color: #fdfdfd;
  cursor: pointer; 
  border: 1px solid #ebebeb;
  border-bottom-color: #e2e2e2;
  border-radius: .25em;
}
.filebox input[type="file"] {
  position: absolute; 
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip:rect(0,0,0,0); 
  border: 0;
}

 

 

그러면 위와 같은 버튼이 생기면서, 해당 업로드 버튼을 클릭하면, file을 선택할 수 있는 창이 나타나게 된다.

 

여기서 중요한 건 label 태그의 for와 input 태그의 id가 일치해야한다.

이게 일치하지 않으면, input 태그의 기능이 동작하지 않는다.

(이 부분 때문에 엄청나게 헤맸다...)