input file 버튼 커스터마이징하기

이번 시간에는 input [type=”file”]의 스타일을 커스텀해보자!

1. input [type=”file”]?

• input에 type을 file로 지정하면 파일을 업로드할 수 있는 버튼을 만들 수 있다.

<input type="file" >

• 만약 특정 파일 유형만 허용하려면 accept를 사용하면 된다.

<input type="file" accept=".doc,.docx">

• multiple 속성을 추가하면 2개 이상의 파일을 추가할 수 있다.

<input type="file" multiple>

• 이처럼, file은 파일 업로드를 빠르게 구현할 수 있지만, input자체에 스타일을 적용할 수 없는 단점이 있다.
• 아래 예시는 input에 스타일을 준 모습이다. 앞서 언급했듯이 스타일이 적용되지 않았다ㅜ

See the Pen input file not apply style by KumJungMin (@kumjungmin) on CodePen.

2. 스타일 지정하는 방법

😕 그렇다면 input type=”file” 버튼에 어떻게 스타일을 줄 수 있을까? 2가지 방법을 알아보자!

(1) label 태그 이용하기

• 커스텀 버튼을 label태그 안에 추가하고, type=”file”에 display: none을 적용하는 방법이다.

See the Pen input file label button by KumJungMin (@kumjungmin) on CodePen.

(2) file-selector-button 선택자 이용하기

• file-selector-button 선택자를 사용하면, 파일 업로드 버튼을 커스텀할 수 있다.
• 단, label과 달리 텍스트 변경이 불가하다ㅜ

See the Pen file-selector-button by KumJungMin (@kumjungmin) on CodePen.