设置原生 Shadow DOM 元素的样式

我一直相信您能够访问和覆盖 Shadow DOM 元素的样式。我看到了 html5rocks 上的文章，它定义了您可以使用哪些 webkit 特定选择器：http://www.html5rocks.com/en/tutorials/webcomponents/shadowdom-201/ 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;
}

然而，当我尝试时，这并没有按预期工作 - 似乎某些 sytle 属性无法被覆盖。例如高度和宽度 然而，设置 webkit 外观似乎确实阻止了它看起来像一个按钮。

这是真的？

我想做的是设置范围滑块的样式，以便手柄和轨道可以是不同的颜色。

这是简单的演示：http://jsfiddle.net/sidonaldson/dCK​​d3/ http://jsfiddle.net/sidonaldson/dCKd3/我可以隐藏该按钮，但是当我设置背景颜色时，它会弹出！

-webkit-appearance (or -moz-appearance) 被认为重置/更新元素的浏览器样式，例如设计风格div like a button (see w3c 参考 http://www.w3schools.com/cssref/css3_pr_appearance.asp， 和这个jsFiddle http://jsfiddle.net/dCKd3/4/)，或者重置 a 的样式select（看这个jsFiddle http://jsfiddle.net/vNK3Q/1265/）。 例如，如果您使用苹果移动设备浏览，您将看到默认情况下按钮是圆形的。-webkit-appearance:none;会阻止这种情况发生。 （也可以看看here http://trentwalton.com/2010/07/14/css-webkit-appearance/）。它似乎还没有在桌面浏览器上完全实现。

我能够达到你想要的效果（jsFiddle http://jsfiddle.net/dCKd3/3/):

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

然而，这是一个很棘手的解决方案。如果您想要完全可定制的控件，我会推荐jQuery用户界面 http://jqueryui.com/它也是独立于浏览器的，并且不依赖于实验性浏览器功能。

Edit:

您可以找到以下值的列表-webkit-appearance here http://davidwalsh.name/demo/webkit-styles.php.

您第一次尝试的问题是，input[type="range"]已设立-webkit-appearance: slider-horizontal。这会继承给子级，并且您无法设置背景。当你添加-webkit-appeareance: none;也到input[type="range"]，您可以将背景颜色设置为您想要的（请参阅jsFiddle http://jsfiddle.net/dCKd3/7/）。您只需设置滑块拇指的宽度和高度，因为您刚刚删除了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;
}