개발자도구 Shadow DOM 활용하기
개발자도구(F12) 설정에서
Show user agent shadow DOM (사용자 에이전트 그림자 DOM 표시) 선택
::pseudo-element 선택하여 CSS 수정
input progress 요소 등등 pseudo 속성이 부여되어있는 요소는 ::pseudo-element를 이용하여 스타일을 변경해줄 수 있다
input range 커스터마이징
pseudo 속성이 부여되지 않은 요소에는 아래처럼 브라우저 기본CSS(user agent stylesheet)가 선언되어 있는 경우가 있다.
반드시 appearance: none; 으로 지정해준 후 스타일을 수정한다.
- 브라우저 기본CSS 적용된 코드
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>pseudo-element</title>
<style>
input[type="range"] { /* user agent stylesheet - 브라우저 기본 CSS */
appearance: none;
}
input[type="range"]::-webkit-slider-thumb { /* user agent stylesheet - 브라우저 기본 CSS */
appearance: none;
width: 10px;
height: 10px;
border-radius: 50%;
background-color: #667328;
}
input[type=range]::-webkit-slider-runnable-track { /* ::pseudo-element */
background-color: #b8cc54;
border-radius: 10px;
}
</style>
</head>
<body>
<input type="range">
</body>
</html>크롬 input range 기본스타일
input range CSS 커스터마이징
벤더 프리픽스
-webikt- : 크롬, 사파리, Edge에서만 적용되는 스타일
-moz-: Firefox에서만 적용되는 스타일
-ms-: Explorer에서만 적용되는 스타일
