개발 블로깅/오늘의 TIL
[2019.10.30] input type file 커스터마이징 방법
Hello이뇽
2019. 10. 31. 00:01
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 태그의 기능이 동작하지 않는다.
(이 부분 때문에 엄청나게 헤맸다...)
반응형