기본 그림자 DOM 요소 스타일 지정

Question

그림자 DOM 요소의 스타일에 액세스하고이를 무시할 수 있다고 항상 생각했습니다. 유구의 속성 중 일부는 무시 될 수없는 것처럼 나타납니다 - http://www.html5rocks.com/en/tutorials/webcomponents/shadowdom-201/

input[type=range]::-webkit-slider-thumb { 
    -webkit-appearance: none; 
    background-color: blue; 
    width: 10px; 
    height: 40px; 
} 

을하지만 난이 예상대로 작동하지 않을 것입니다 시도 할 때 : 나는 당신이 사용할 수있는 특정 선택기를 웹킷을 정의 HTML5ROCKS에 기사를 보았다 . 예 : 높이와 너비 그러나 웹킷 모양을 설정하면 단추처럼 보이지 않습니다.

사실인가요?

핸들과 트랙이 다른 색상이 될 수 있도록 범위 슬라이더의 스타일을 지정하고 싶습니다.

다음은 간단한 데모입니다. http://jsfiddle.net/sidonaldson/dCKd3/ 버튼을 숨길 수는 있지만 배경색을 설정하면 다시 나타납니다!

Answer 1

-webkit-appearance (또는 -moz-appearance)은 요소에 대한 브라우저 스타일을 재설정/업데이트하는 것으로 생각됩니다. div의 스타일을 button (w3c reference 및이 jsFiddle 참조)으로 설정하거나 select (이 jsFiddle 참조)의 스타일을 재설정하십시오. 예를 들어 Apple 모바일 장치로 탐색하는 경우 기본적으로 단추가 반올림됩니다. -webkit-appearance:none; 그럴 수 있습니다. (here 참조). 데스크톱 브라우저에서는 아직 완전히 구현되지 않은 것 같습니다.

input[type=range]::-webkit-slider-thumb { 
    -webkit-box-shadow: inset 0 0 10px 10px yellow; 
} 

그러나,이 해키 솔루션입니다 :

나는 당신이 ( jsFiddle)로 원하는 효과를 얻을 수 있었다. 완벽하게 사용자 정의 할 수있는 controlls을 원한다면 나는 브라우저가 아닌 indepentent이고 실험적인 브라우저 기능에 의존하지 않는 jQuery UI을 권하고 싶습니다.

---

편집 : 당신은 -webkit-appearancehere 값의 목록을 찾을 수 있습니다

.

첫 번째 시도에서의 문제는 input[type="range"]이 -webkit-appearance: slider-horizontal으로 설정되어 있습니다. 이것은 아이들에게 상속되며 배경을 설정할 수 없습니다. 에도 -webkit-appeareance: none;을 추가하면 배경색을 원하는대로 설정할 수 있습니다 (jsFiddle 참조). 슬라이더 - 썸의 너비와 높이를 설정해야합니다. 그 이유는 바로 그 모양을 제거한 slider-horizontal 모양을 삭제했기 때문입니다.

새 CSS는 다음과 같습니다 자세한 응답

input[type=range]::-webkit-slider-thumb { 
-webkit-appearance: none; 
outline:solid 1px yellow; 

background:green; 

/* we have to set that, because it's not inherited anymore */ 
width: 10px; 
height: 20px; 

} 

input[type=range] { 
    -webkit-appearance: none; /* this is important */ 
} 

input[type=range]::-webkit-slider-runnable-track { 
    background:red; 
}