input file 버튼 스타일 바꾸기 - 2. 버튼의 속성 찾아서 스타일 바꾸기

shadow DOM의 존재를 알았으니 button을 선택자로 고를 수 있고, 스타일링 할 수도 있다.

pseudo 속성에 있는 "-webkit-file-upload-button" 을  pseudo 속성을 나타내는 :: 뒤에 붙여서

아래와 같이 사용할 수 있다.

 

 

 

-webkit- 수식어는 크로스 브라우징을 위한 접두어이다.

각각 브라우저마다 shadow DOM 접두어가 다르다.

크로스 브라우징을 위해서 아래 접두어에 맞게 스타일링을 추가해준다.

  -webkit- : 크롬, 오페라, 사파리, Edge 브라우저

  -moz- : 파이어폭스 브라우저

  -ms- : 익스플로러

  -o- : 오페라 브라우저

 

 

보통은 파일업로드 버튼은 input 태그는 display:none 하고 label태그에 대신 스타일을 준다.