input file 버튼 스타일 바꾸기 - 1. shadow DOM의 존재

그림자 DOM 확인하기

1. 그림자 DOM 표시 설정 

개발자도구를 켠 상태에서 F1 (혹은 Settings 메뉴)

그림자 DOM 표시 체크박스에 체크

 

그러면 크롬 개발자도구에서 input 요소 내부의 shadow dom 을 확인할 수 있다.

shadow DOM 표시 전

shadow DOM 표시 후

 

 

type:file인 input 태그는 type:button인 input 태그 +  span 태그 가 합쳐진 형태다. 

이 숨겨진 돔을 찾아서 "파일선택" 버튼에 스타일을 입힐 수 있다. 

 

 

 

 

 

 

나만몰랐냐구