使用样式美化原生 Shadow DOM 元素

Question

使用样式美化原生 Shadow DOM 元素

3

我一直认为你可以访问和覆盖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外观确实可以防止它看起来像一个按钮。

这是真的吗？

我想做的是将范围滑块设计成手柄和轨道颜色不同的样式。

这里有一个简单的演示：http://jsfiddle.net/sidonaldson/dCKd3/。我可以隐藏按钮，但当我设置背景颜色时，它又弹了回来！

- sidonaldson

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- tobspr · Accepted Answer

-webkit-appearance（或-moz-appearance）被认为是重置/更新元素的浏览器样式，例如将div样式设置成button（请参阅w3c参考资料和这个jsFiddle），或重置select的样式（请参阅这个jsFiddle）。例如，在苹果移动设备上浏览时，默认情况下按钮是圆角的。使用-webkit-appearance:none;可以防止这种情况发生（请参阅此处）。然而，似乎它在桌面浏览器上尚未完全实现。

我使用(jsFiddle)实现了您所需的效果。

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

然而，这是一个hacky的解决方案。如果您想要完全可定制的控件，我建议使用jQuery UI，它也是与浏览器无关的，不依赖于实验性浏览器功能。

编辑：

您可以在此处找到 -webkit-appearance 的值列表。

您第一次尝试的问题是，input[type="range"] 已设置了 -webkit-appearance: slider-horizontal。这会继承到子元素中，因此您无法设置背景。当您还将 input[type="range"] 添加 -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;
}