带阴影dom的样式输入范围

Question

我需要设置input type range样式-更改input type range background-color ，并更改滑块按钮的外观(width, height, color ）。 到目前为止，我已经设法更改了输入的background-color ，但是我找不到选择该滑块按钮的方法。 我想这必须通过影子DOM完成，但无法弄清楚如何做。

<input id="my-range" type="range">

#my-range {
    -webkit-appearance: none;
    background-color: #592A71;
    width: 45%;
    height:15px;
    margin:30px;
}

这是例子

Answer 1

您要寻找的Shadow-dom 可以在这里找到 ，这是一个示例（从链接复制）：

 input[type=range] { /*removes default webkit styles*/ -webkit-appearance: none; /*fix for FF unable to apply focus style bug */ border: 1px solid white; /*required for proper track sizing in FF*/ width: 300px; } input[type=range]::-webkit-slider-runnable-track { width: 300px; height: 5px; background: #ddd; border: none; border-radius: 3px; } input[type=range]::-webkit-slider-thumb { -webkit-appearance: none; border: none; height: 16px; width: 16px; border-radius: 50%; background: goldenrod; margin-top: -4px; } input[type=range]:focus { outline: none; } input[type=range]:focus::-webkit-slider-runnable-track { background: #ccc; } input[type=range]::-moz-range-track { width: 300px; height: 5px; background: #ddd; border: none; border-radius: 3px; } input[type=range]::-moz-range-thumb { border: none; height: 16px; width: 16px; border-radius: 50%; background: goldenrod; } /*hide the outline behind the border*/ input[type=range]:-moz-focusring{ outline: 1px solid white; outline-offset: -1px; } input[type=range]::-ms-track { width: 300px; height: 5px; /*remove bg colour from the track, we'll use ms-fill-lower and ms-fill-upper instead */ background: transparent; /*leave room for the larger thumb to overflow with a transparent border */ border-color: transparent; border-width: 6px 0; /*remove default tick marks*/ color: transparent; } input[type=range]::-ms-fill-lower { background: #777; border-radius: 10px; } input[type=range]::-ms-fill-upper { background: #ddd; border-radius: 10px; } input[type=range]::-ms-thumb { border: none; height: 16px; width: 16px; border-radius: 50%; background: goldenrod; } input[type=range]:focus::-ms-fill-lower { background: #888; } input[type=range]:focus::-ms-fill-upper { background: #ccc; } 

 <input id="my-range" type="range"> 

Answer 2

挂在range input上的按钮称为拇指。 这就是您选择它们​​的方式。

Webkit/Blink - input[type=range]::-webkit-slider-thumb
Firefox - input[type=range]::-moz-range-thumb
IE - input[type=range]::-ms-thumb

样品

 /* Special styling for WebKit/Blink */ input[type=range]::-webkit-slider-thumb { -webkit-appearance: none; background: red; } /* All the same stuff for Firefox */ input[type=range]::-moz-range-thumb { background: red; cursor: pointer; } /* All the same stuff for IE */ input[type=range]::-ms-thumb { background: red; cursor: pointer; } 

 <input id="my-range" type="range"> 

参考文献：

CSS技巧

其他连结