[HTML] Shadow DOM - 숨겨진 요소들 변경하는 법

<p> Shadow DOM을 살펴보자.</p>
<input type="file">
<br>
<input type="range">
<br>
<input value="input태그">

Shadow DOM을 살펴보자.

이런 input태그들,

버튼을 꾸미고 싶을 때 어떻게 하면 좋을까?

 

style="background: red;" 

이런식으로 줄 수 있으면 좋겠지만

얘들은 적용이 되지 않는다.

 

크롬에서 검사하기 기능을 사용해서 코드를 보자.

파일 선택 버튼을 눌러보면

... pseudo="-webkit-file-upload-button" 이라고 나와있는 것을 볼 수 있다.

 

여기 적힌대로 pseudo element를 설정해서 버튼을 꾸밀 수 있다.

pseudo element로 작성해주니 잘 적용이 된 모습이다.

 

---

그런데 어떤 것은 위 방법대로 해도 제대로 적용이 되지 않을 수 있다.

user agent stylesheet

 가 적용되어 있는 경우에 그럴 수 있다.

 

user agent stylesheet는 브라우저 기본 스타일인데,

이것을 제거해야 내가 준 스타일이 적용될 수 있다.

appearance: none을 주면 된다.

input[type=range] 전체에 appearance:none을 주고

스타일을 주니 잘 적용이 되었다.