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

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

这是真的？

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

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

4

1 回答 1

2

-webkit-appearance(or -moz-appearance) 被认为重置/更新元素的浏览器样式，例如将 a 设置为div类似 a 的样式button（参见w3c 参考和此jsFiddle），或重置 a 的样式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. 这会继承给孩子，您无法设置背景。当您-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-21T16:30:22.913 回答