shadow DOM으로 설정되어있는 요소들
(ex : -webkit-slider-runnable-track)은 커스터마이징 하기 위해서는 공통적으로
-webkit(적용 브라우저 따라 선택)-appearance : none;
속성을 반드시 꼭 적용 시켜줘야 커스터마이징한 디자인이 적용되는 것이 맞을까요??
>> 저는 이렇게 이해했는데 정확하게 이해한 것 일까요??
(브라우저에서 기본적으로 적용되는 스타일을 제거해야 커스텀한게 적용되기 때문에
브라우저 기본 스타일속성을 없애주기 위해서 appearance:none;을 적용.)
아래는 강의 듣고, 따로 찾아서 적용해본 커스텀인데, input=range 말고도 다른 속성들을 커스텀할 때 appearance : none; 속성이 꼭 들어가하는지 확실하게 알고싶어서 질문 올립니다 ㅎㅎ..
/* range 꾸미기 연습 */
input[type='range'] {
-webkit-appearance: none;
}
input[type='range']:focus {
outline: none;
/* outline 속성의 용도는 요소를 두드러져 보이게 만들고자 할 때 사용한다.
주로, 레이아웃을 완성한 후에 문제점을 보기 위해 요소를 눈에 띄게 표시할 수 있음. */
}
input[type='range']::-webkit-slider-runnable-track {
width: 100%;
height: 5px;
background-color: tomato;
cursor: pointer;
}
input[type="range"]::-webkit-slider-thumb {
border: 3px solid violet;
height: 15px;
width: 10px;
background: #ffffff;
cursor: pointer;
-webkit-appearance: none;
margin-top: -5px;
}
