[HTML] HTML 크롬(Chrome) input type='file' 커스터마이징 하는 방법

이번 글은 input type='file'을 사용할 때, 해당 기능을 다른 방법으로 커스터마이징 하는 방법에 대해 글을 기록한다. 물론, 이것을 사용하려고 했던 이유는 파일 첨부 기능을 넣으려고 했는데 해당 기능에 한글로 되어 있어 이것을 영어로 변환하려다가 적용했다.

---

목차

1. 커스터마이징 하는 방법

---

1. 커스터마이징 하는 방법

일단, <input type='file'/> 태그를 사용하면 크롬에서는 아래와 같이 나온다.

 

근데, 저 파일 선택과 선택된 파일 없음을 영어로 바꾸고 싶은데, 스타일을 먹여도 안먹혀서 label을 만들어서 사용하는 것이 있어 적용했다.

 

제일 먼저, input 태그에 있는 것을 style을 먹여서 display:none을 한다. 그러면, 해당 input 태그는 없어지게 되는데, 이 기능을 label을 만들어서 대체를 할 것이다.

<input type='file' name='testUpload' id="testUpload" style="display:none"/>

 

아래와 같이, label을 생성하여 for 속성을 사용하여 testUpload의 기능을 대신 사용한다. 아래와 같이, 먹이면 label을 누르면 해당 input 태그의 기능 첨부가 살아난다.

<label for="testUpload" style="background-color:#E2E2E2; padding: 5px 25px; border-radius: 4px; color: black; cursor: pointer;">Upload</label>

---

참고

https://webdir.tistory.com/435

폼 필드(input type="file") 디자인 #4