css - 为原生 Shadow DOM 元素设置样式

Question

我一直相信您能够访问和覆盖 Shadow DOM 元素的样式。我看到了关于 html5rocks 的文章，它定义了您可以使用的特定于 webkit 的选择器: 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;
}

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

这是真的吗？

我想做的是设置范围 slider 的样式，以便 handle 和轨道可以是不同的颜色。

这是一个简单的演示:http://jsfiddle.net/sidonaldson/dCKd3/我可以隐藏按钮，但是当我设置背景颜色时它会弹回来!

Answer 1

-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;
}

但是，这是一个 hacky 解决方案。如果你想要完全可定制的控件，我会推荐 jQuery UI，它也是浏览器无关的，不依赖于实验性浏览器功能。

---

编辑:

您可以找到 -webkit-appearance here 的值列表。

您第一次尝试的问题是，input[type="range"] 设置了 -webkit-appearance: slider-horizo​​ntal。这会继承给 child ，您无法设置背景。当您将 -webkit-appeareance: none; 添加到 input[type="range"] 时，您可以将背景颜色设置为您想要的颜色(参见 jsFiddle ) .您只需设置 slider 拇指的宽度和高度，因为您刚刚删除了为您完成的 slider-horizo​​ntal 外观。

新的 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;
}