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

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

这是真的吗？

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

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

Answer 1

-webkit-appearance（或-moz-appearance）被认为会重置/更新元素的浏览器样式，例如像div一样设置button的样式（请参阅w3c reference和此jsFiddle），或重置select的样式（请参阅此jsFiddle }）。例如，如果您使用Apple移动设备浏览，则默认情况下您会看到按钮已四舍五入。 -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-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; }

设计原生Shadow DOM元素

1 个答案: