label
-
[html] input file 태그를 커스터마이징하려면 label 태그를 이용해야 한다.ETC 2021. 5. 3. 21:48
input 태그는 그 자체로 디자인을 적용하기 까다로운 점이 있다. 따라서 디자인을 적용하고 싶다면 input 태그는 display: none; 으로 숨기고, label 태그를 연결한 뒤, label 태그에 CSS를 적용해야 한다. 아래는 input file tag와 label tag를 이용하여, 128 * 128 크기의 영역을 눌러 file 선택 창을 띄우는 방법 예시이다. css style 이 조금 가미되었지만 크게 중요하진 않다. 클릭하세요. 결과는 아래와 같이 나온다. 클릭하면 OS에 기본제공되는 파일 선택 화면이 표시된다.