Css 设置本机阴影DOM元素的样式

我一直认为您能够访问和覆盖阴影DOM元素的样式。我在html5rocks上看到了这篇文章，它定义了您可以使用哪些特定于webkit的选择器：

然而，当我尝试时，它并没有像预期的那样工作——它似乎无法覆盖某些sytle属性。e、 g.高度和宽度 然而，设置webkit的外观确实会让它看起来像一个按钮

这是真的吗

我想做的是样式的范围滑块，使处理和轨道可以是不同的颜色

---

这是一个简单的演示：我可以隐藏按钮，但当我设置背景颜色时，它会弹回来

-webkit外观

（或

-moz外观

）被认为是重置/更新元素的浏览器样式，例如，将

div

设置为类似于

按钮的样式（请参见和此），或重置
选择
（请参见此）。
例如，如果您使用apple移动设备浏览，您将看到默认情况下按钮是四舍五入的<代码>-webkit外观：无将阻止这种情况。（另见）。它似乎还没有完全在桌面浏览器上实现

我能够通过（）实现您想要的效果：

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


编辑：

您可以找到
-webkit外观的值列表

第一次尝试时出现的问题是，
input[type=“range”]
设置了
-webkit外观：滑块水平
。这将继承给子对象，而您无法设置背景。添加
-webkit外观时：无
也可以在
输入[type=“range”]
中设置所需的背景色（请参阅）。您只需设置滑块拇指的宽度和高度，因为您刚刚删除了为您设置的
滑块水平
外观

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

感谢您的详细回复-大部分都是有用的背景信息，这些信息总是很好的，但是您没有提供完美的解决方案，或者无法回答某些样式属性是否无法覆盖的问题。然而，你确实提供了灵感，告诉我这是如何设计的，所以我很乐意给你奖金！我更新了答案，希望它现在能更多地回答你的问题：）啊！因此，必须在父元素上设置-webkit外观以取消继承。这是有道理的。通过在shadowdom中使用伪元素，我很幸运没有这样做：这篇文章（）还描述了如何对输入[type=“range”]进行根本性的更改。注意，他还使用了
-webkit外观：none对于inputHere是使用您更优雅的方法的最终范围滑块！
input[type=range]::-webkit-slider-thumb {
    -webkit-box-shadow: inset 0 0 10px 10px yellow;
}

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