设计原生Shadow DOM元素-Java 学习之路

我一直相信你能够访问和覆盖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/我可以隐藏按钮但是当我设置背景颜色时它会弹出！

1 回答

2
-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，这也是浏览器独立的，不依赖于实验性的浏览器功能 .

Edit:

您可以找到 -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;
}
```
回复于 2024-04-29T17:53:07+08:00

设计原生Shadow DOM元素

1 回答

相关问题