造型原生的影子DOM元素

我一直認爲您能夠訪問並覆蓋影子DOM元素上的樣式。我看到HTML5ROCKS的物品，其定義了WebKit的具體選擇，你可以使用： http://www.html5rocks.com/en/tutorials/webcomponents/shadowdom-201/造型原生的影子DOM元素

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

然而，當我想這是不正常工作 - 它看起來好像有些sytle屬性不能被覆蓋。例如高度和寬度但是，似乎設置webkit外觀確實停止它看起來像一個按鈕。

這是真的嗎？

我想要做的是風格的範圍滑塊，使手柄和軌道可以是不同的顏色。

這裏是簡單的演示：http://jsfiddle.net/sidonaldson/dCKd3/我可以隱藏按鈕，但當我設置背景顏色時，它會彈出！

來源

2013-08-19 sidonaldson

-webkit-appearance（或-moz-appearance）被認爲重置/更新元素的瀏覽器樣式，例如，設計一個div，如button（請參閱w3c reference和jsFiddle），或者重置select的樣式（請參見此jsFiddle）。例如，如果您使用蘋果移動設備進行瀏覽，則會看到按鈕默認爲四捨五入。 -webkit-appearance:none;會阻止這一點。（另請參閱here）。它似乎還沒有在桌面瀏覽器上完全實現。

我是能夠實現你（jsFiddle）想要的效果：

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

然而，這是一個哈克的解決方案。如果你想完全自定義的控制列表，我會推薦jQuery UI這也是瀏覽器無關，不依賴於實驗性的瀏覽器功能。

編輯：

你可以找到值的列表-webkit-appearancehere。

第一次嘗試的問題是，input[type="range"]已設置-webkit-appearance: slider-horizontal。這繼承給了孩子們，你無法設置背景。當您將-webkit-appeareance: none;也添加到input[type="range"]時，可以將背景顏色設置爲您想要的值（請參閱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; 
}

來源

2013-08-21 16:30:22 tobspr

感謝您的詳細答覆 - 大部分是總是好的有用的背景信息，但是你並沒有完全提供了一個完美的解決方案或能回答這個問題至於是否有些樣式屬性不能被覆蓋。不過，你的確提供了這樣的設計靈感，所以我會很樂意給你賞金！ – sidonaldson

我更新了答案，希望現在更多地回答你的問題:) – tobspr

啊！所以必須在父元素上設置-webkit-appearance來取消繼承。這使得sence。我有很多運氣沒有通過使用陰影DOM中的僞元素來做到這一點：http://jsfiddle.net/sidonaldson/dCKd3/5/ – sidonaldson

造型原生的影子DOM元素

回答

相關問題