Css HTML5范围输入中的上下填充样式_Css_Html

Css HTML5范围输入中的上下填充样式

css html

Css HTML5范围输入中的上下填充样式,css,html,Css,Html,如前所述，IE允许按如下方式在CSS中设置上下填充或轨迹区域的样式： /*以下仅影响IE中的范围输入*/ 输入[type=“range”]：-ms填充下限{ 背景色：红色； } 输入[type=“range”]：-ms填充上限{ 背景颜色：蓝色； } 首先，阅读丹尼尔·斯特恩的文章。他的想法是使输入不可见，然后应用自定义样式他还开发了一个名为的优秀在线工具，在该工具中，您可以选择样式预设和参数，并获得自动生成的CSS代码，如下所示：输入[类型=范围]{ -webkit外观：无；利润率：

如前所述，IE允许按如下方式在CSS中设置上下填充或轨迹区域的样式：

/*以下仅影响IE中的范围输入*/
输入[type=“range”]：-ms填充下限{
背景色：红色；
}
输入[type=“range”]：-ms填充上限{
背景颜色：蓝色；
}

首先，阅读丹尼尔·斯特恩的文章。他的想法是使输入不可见，然后应用自定义样式

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

输入[类型=范围]{
-webkit外观：无；
利润率：10px0；
宽度：100%；
}
输入[类型=范围]：焦点{
大纲：无；
}
输入[类型=范围]：-webkit滑块可运行轨迹{
宽度：100%；
高度：12.8px；
光标：指针；
动画：0.2s；
盒影：0px 0px 0px 000000，0px 0px 0px 0d0d；
背景：#ac51b5；
边界半径：25px；
边框：0px实心#000101；
}
输入[类型=范围]：-webkit滑块拇指{
盒影：0px 0px 0px 000000，0px 0px 0px 0d0d；
边框：0px实心#000000；
高度：20px；
宽度：39px；
边界半径：7px；
背景：#65001c；
光标：指针；
-webkit外观：无；
利润上限：-3.6px；
}
输入[类型=范围]：焦点：--webkit滑块可运行轨迹{
背景：#ac51b5；
}
输入[类型=范围]：-moz范围轨迹{
宽度：100%；
高度：12.8px；
光标：指针；
动画：0.2s；
盒影：0px 0px 0px 000000，0px 0px 0px 0d0d；
背景：#ac51b5；
边界半径：25px；
边框：0px实心#000101；
}
输入[类型=范围]：-moz范围拇指{
盒影：0px 0px 0px 000000，0px 0px 0px 0d0d；
边框：0px实心#000000；
高度：20px；
宽度：39px；
边界半径：7px；
背景：#65001c；
光标：指针；
}
输入[类型=范围]：-ms轨道{
宽度：100%；
高度：12.8px；
光标：指针；
动画：0.2s；
背景：透明；
边框颜色：透明；
边框宽度：39px0；
颜色：透明；
}
输入[类型=范围]：-ms填充下限{
背景：#ac51b5；
边框：0px实心#000101；
边界半径：50px；
盒影：0px 0px 0px 000000，0px 0px 0px 0d0d；
}
输入[类型=范围]：-ms填充上限{
背景：#ac51b5；
边框：0px实心#000101；
边界半径：50px；
盒影：0px 0px 0px 000000，0px 0px 0px 0d0d；
}
输入[类型=范围]：-ms thumb{
盒影：0px 0px 0px 000000，0px 0px 0px 0d0d；
边框：0px实心#000000；
高度：20px；
宽度：39px；
边界半径：7px；
背景：#65001c；
光标：指针；
}
输入[类型=范围]：焦点：-毫秒填充下限{
背景：#ac51b5；
}
输入[类型=范围]：焦点：--ms填充上限{
背景：#ac51b5；
}
身体{
填充：30px；
}

我正在使用以下代码，这些代码基于A.Dayan提供的链接。注意最小-最大值，并特别针对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>


有样式的滑块
输入[type='range']{
-webkit外观：无；
宽度：100%；
边界半径：4px；
高度：5px；
边框颜色：#1F；
边框样式：实心；
边框宽度：1px；
背景：-webkit线性渐变（左侧，绿色0%，绿色50%，黑色50%）；
}
输入[type='range']：：-webkit滑块拇指{
-webkit外观：无！重要；
-webkit边界半径：2px；
背景颜色：蓝色；
高度：21px；
宽度：9px；
}
输入[类型=范围]：焦点{
大纲：无；
}
$（'input[type=“range”]”）。在（'input'，函数（）{
var percent=Math.ceil（（（this.value-this.min）/（this.max-this.min））*100）；
console.log（this.min）；
$（this.css（'background'，'-webkit线性渐变（左，绿色0%，绿色'+percent+'%，黑色'+percent+'%））；
});

Firefox有一个（新的？）伪元素，用于设置（IE称之为）范围输入的“下”部分的样式。根据：

：-moz-range-progressCSS伪元素表示该部分指的“轨道”（指示器或拇指在其中滑动的凹槽） type=“range”的

，对应于低于当前由拇指选择的值

对于上面的音轨，仍然使用（per）

：-moz范围音轨

我今天刚刚发现并尝试了它；工作得很好。

在这个阶段，仍然没有本机实现的选项

-ms-fill-lower

或

-moz-fill-lower

铬合金。使用操作range输入元素不是一个选项，所以我使用了带有CSS线性渐变和少量javascript的调整技术来对输入范围进行CSS更改

希望这对某人有所帮助

我使用这个解决方案的灵感来自。它使用基于视图宽度的框阴影（100vw是滑块的最大宽度），并使用溢出：隐藏进行约束。我用的是圆形拇指，所以从100vw中减去一半拇指宽度，否则方块阴影会爬到拇指的另一侧

css

html

（仅供参考，比斯克、锡耶纳和秘鲁都是）

谢谢。这很有帮助，但不幸的是，它没有回答我的主要问题。我想对“拇指”左侧和右侧的轨迹区域应用不同的样式。我不确定这在IE之外是否可行。是的，只有CSS才能在IE上实现，但是如果你不介意添加一些脚本，可以用线性渐变来模拟。请参见以下示例：非常好。谢谢。它只是展示了如何为范围设置颜色，而不是问题中提到的下限和上限。我可以获得AngularJS版本吗？很遗憾，我没有更多的权限访问此代码。信息技术

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

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