为原生 Shadow DOM 元素设置样式

Posted

技术标签:

【中文标题】为原生 Shadow DOM 元素设置样式【英文标题】:Styling native Shadow DOM elements 【发布时间】:2013-08-21 09:52:37 【问题描述】:

我一直相信您能够访问和覆盖 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】:

-webkit-appearance(或-moz-appearance)被认为会重置/更新元素的浏览器样式,例如将div 设置为像button 一样的样式(请参阅w3c reference,以及此jsFiddle),或重置select 的样式(请参阅此jsFiddle)。 例如,如果您使用苹果移动设备浏览,您会看到按钮默认是圆角的。 -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;

【讨论】:

感谢您的详细回复-其中大部分都是有用的背景信息,总是很好,但是您并没有提供完美的解决方案,或者无法回答有关某些样式属性是否无法使用的问题被覆盖。但是,您确实提供了有关如何设计这种样式的灵感,所以我很乐意为您提供赏金! 我更新了答案,希望它现在能更多地回答你的问题:) 啊!所以必须在父元素上设置 -webkit-appearance 来取消继承。这是有道理的。通过在影子 DOM 中使用伪元素,我很幸运没有这样做:jsfiddle.net/sidonaldson/dCKd3/5 这篇文章 (davidbcalhoun.com/2011/…) 还描述了如何彻底改变输入[type="range"]。请注意,他还使用-webkit-appearance: none; 作为输入 这是使用更优雅方法的最终范围滑块! jsfiddle.net/sidonaldson/dCKd3/8

以上是关于为原生 Shadow DOM 元素设置样式的主要内容,如果未能解决你的问题,请参考以下文章

shadow dom

温故而知新-Javascript为DOM元素设置样式

使用原生js的scrollTop,刷新进入页面定位到某一个dom元素

DOM设置下一个元素的CSS样式

jquery隐式迭代(遍历内部dom元素) jquery设置样式方法

原生JS获取及设置CSS样式-1.行内样式