숨겨진 스타일 변경

숨겨진 스타일 변경

<input type="file" class="input-file">

.input-file::file-selector-button {
    background: skyblue;
    border: none;
    padding: 20px;
}

.input-file::file-selector-button:hover {
    background: blue;
}

• file selector button(input type="file")은 자동으로 버튼+문자 개체가 생성되는데, 이는 자동 생성되어 숨겨져 있는 개체이다.
• 이런 개체에도 Pseudo-element 를 이용해 스타일을 지정해줄 수 있다
• 위와 같이 요소가 숨겨진 개체들은 shadow-DOM 에서 추가로 학습 예정