样式上下填HTML5范围输入

Question

正如这里所解释的，IE 允许在 CSS 中对下部和上部填充或轨道区域进行样式设置，如下所示：

 /* The following only affects the range input in IE */ input[type="range"]::-ms-fill-lower { background-color: red; } input[type="range"]::-ms-fill-upper { background-color: blue; }

 <input type="range">

有谁知道使用 CSS 或任何 JS 库将不同的 styles应用于 Firefox、Chrome 等中范围输入的上下轨道的方法？

更新：

正如Wilson F所指出的，这现在在 Firefox 中得到支持：

 /* The following only affects the range input in FF */ input[type="range"]::-moz-range-progress { background-color: red; } input[type="range"]::-moz-range-track { background-color: blue; }

 <input type="range">

Answer 1

首先，阅读由Daniel Stern撰写的使用CSS设计跨浏览器兼容范围输入的文章。 他的想法是使输入不可见，然后应用自定义样式。

他还开发了一个名为randge.css的优秀在线工具，您可以在其中选择样式预设和参数，并获得自动生成的CSS代码，如下所示：

 input[type=range] { -webkit-appearance: none; margin: 10px 0; width: 100%; } input[type=range]:focus { outline: none; } input[type=range]::-webkit-slider-runnable-track { width: 100%; height: 12.8px; cursor: pointer; animate: 0.2s; box-shadow: 0px 0px 0px #000000, 0px 0px 0px #0d0d0d; background: #ac51b5; border-radius: 25px; border: 0px solid #000101; } input[type=range]::-webkit-slider-thumb { box-shadow: 0px 0px 0px #000000, 0px 0px 0px #0d0d0d; border: 0px solid #000000; height: 20px; width: 39px; border-radius: 7px; background: #65001c; cursor: pointer; -webkit-appearance: none; margin-top: -3.6px; } input[type=range]:focus::-webkit-slider-runnable-track { background: #ac51b5; } input[type=range]::-moz-range-track { width: 100%; height: 12.8px; cursor: pointer; animate: 0.2s; box-shadow: 0px 0px 0px #000000, 0px 0px 0px #0d0d0d; background: #ac51b5; border-radius: 25px; border: 0px solid #000101; } input[type=range]::-moz-range-thumb { box-shadow: 0px 0px 0px #000000, 0px 0px 0px #0d0d0d; border: 0px solid #000000; height: 20px; width: 39px; border-radius: 7px; background: #65001c; cursor: pointer; } input[type=range]::-ms-track { width: 100%; height: 12.8px; cursor: pointer; animate: 0.2s; background: transparent; border-color: transparent; border-width: 39px 0; color: transparent; } input[type=range]::-ms-fill-lower { background: #ac51b5; border: 0px solid #000101; border-radius: 50px; box-shadow: 0px 0px 0px #000000, 0px 0px 0px #0d0d0d; } input[type=range]::-ms-fill-upper { background: #ac51b5; border: 0px solid #000101; border-radius: 50px; box-shadow: 0px 0px 0px #000000, 0px 0px 0px #0d0d0d; } input[type=range]::-ms-thumb { box-shadow: 0px 0px 0px #000000, 0px 0px 0px #0d0d0d; border: 0px solid #000000; height: 20px; width: 39px; border-radius: 7px; background: #65001c; cursor: pointer; } input[type=range]:focus::-ms-fill-lower { background: #ac51b5; } input[type=range]:focus::-ms-fill-upper { background: #ac51b5; } body { padding: 30px; } 

 <input type="range"> 

是的，只有CSS才可以在IE上使用，但是如果你不介意添加一些脚本，可以使用线性渐变进行模拟。 请参阅以下示例： codepen.io/ryanttb/pen/fHyEJ

Answer 2

有一个（newish？）伪元素用于Firefox的样式（IE调用）是范围输入的“较低”部分。 根据文件 ：

:: - moz-range-progress CSS伪元素表示<track <input>类型=“range”的“轨道”（指示器也称拇指滑动的凹槽）的部分，对应于低于的值拇指当前选择的值。

对于上部赛道，你仍然使用（根据Alexander Dayan的回答 ） ::-moz-range-track 。

我今天才发现并尝试过它; 效果很好。

Answer 3

在此阶段，仍然没有选择在Chrome中本地实现-ms-fill-lower或-moz-fill-lower 。 使用RangeSlider.js操作范围输入元素不是一个选项所以我使用CSS线性渐变的调整技术和一点点javascript来激发输入范围拇指运动的css变化希望这有助于有人检查Codepen上的示例

Answer 4

我正在使用Noah Blon启发的这个解决方案。 它使用基于视图宽度的框阴影（100vw是滑块的最大宽度），并使用overflow：hidden进行约束。 我正在使用圆形拇指，因此从10​​0vw减去拇指宽度的一半，否则盒子阴影会越过拇指的另一侧。

CSS

.wb-PKR-slider {
    -webkit-appearance:none;
    appearance:none;
    margin:5px;
    width:calc(100% - 10px);
    width:-webkit-calc(100% - 10px);
    height:25px;
    outline:none;
    background:bisque;
    border-radius:12px;   
    overflow: hidden;
}
.wb-PKR-slider::-webkit-slider-thumb {
    -webkit-appearance:none;
    appearance:none;
    width:25px;
    height:25px;
    background:sienna;
    box-shadow: -100vw 0 0 calc(100vw - 12px) peru;
    cursor:pointer;
    border-radius: 50%; 
}

HTML

<input type="range" min="0" max="150" value="25" class="wb-PKR-slider" id="wb-PKR-chip-count">

（fyi bisque，sienna和peru都被命名为css颜色 ）

Answer 5

我正在使用以下代码，该代码基于A. Dayan提供的链接。 注意min-max值并专门用于webkit，同时隐藏它实际上是一个渐变。

<html>
<head>
    <title>A styled slider</title>
    <script src="js/jquery-1.10.2.min.js" type="text/javascript"></script>

    <style type="text/css">
        input[type='range'] {
            -webkit-appearance: none;
            width: 100%;
            border-radius: 4px;
            height: 5px;
            border-color: #1f1f1f; 
            border-style: solid; 
            border-width: 1px;
            background: -webkit-linear-gradient(left, green 0%, green 50%, black 50%);
        }

        input[type='range']::-webkit-slider-thumb {
            -webkit-appearance: none !important;
            -webkit-border-radius: 2px;
            background-color: blue;
            height: 21px;
            width: 9px;
        }

        input[type=range]:focus {
            outline: none; 
        }
    </style>


</head>
<body>
    <div>
      <input type="range" value="75" min="100" max="300" />
    </div>
    <script type="text/javascript" >
        $('input[type="range"]').on('input', function () {
            var percent = Math.ceil(((this.value - this.min) / (this.max - this.min)) * 100);
            console.log(this.min);
            $(this).css('background', '-webkit-linear-gradient(left, green 0%, green ' + percent + '%, black ' + percent + '%)');
        });
    </script>
</body>
</html>

Answer 6

有一个 CSS 属性accent-color它将在 Chrome 中设置input[type="range"]元素的下部填充部分的样式。