输入类型范围内的进度条

实际上是否可以在输入范围内生成进度条？有人正在键入一个数字，而条形图正在向右移动，并在拇指左侧改变了背景颜色，取决于数字的大小。下面是现场演示http://jsfiddle.net/xnehel/ur26k9cx/2/`输入类型范围内的进度条

input[type=number]{ 
    font-size: 20px; 
    padding: 5px; 
    } 

input[type=range]{ 
margin-left: -200px; 
    position: absolute; 
    top:7px; 

} 
input[type=range]{ 
    -webkit-appearance: none; 
    width: 170px; 
} 

input[type=range]::-webkit-slider-runnable-track { 

    height: 35px; 
    background: #ddd; 
} 

input[type=range]::-webkit-slider-thumb { 
    -webkit-appearance: none; 
    border: none; 
    height: 35px; 
    border: 0; 
    width: 16px; 
    background: goldenrod; 
} 

input[type=range]:focus 
{ 
    outline: none; 
} 

input[type=range]:focus::-webkit-slider-runnable-track { 
    background: #ccc; 
}

` Aight发现我的问题完美的解决方案： LIVE DEMO

来源

2015-07-20 nehel

那么你期待什么？应该改变颜色还是什么？ –

是的，这个拇指左边的“输入类型范围”中的颜色/进度条应该是将其宽度从0改变为当前的拇指位置。不知道如何将这个想法实现到代码中。 – nehel

http://foundation.zurb.com/docs/components/range_slider.html这样的事情，但只有CSS – nehel

目前，没有纯粹的CSS和输入[类型= “范围”]跨浏览器解决方案。如果你正在寻找类似于IE的实现::-ms-fill-lower和::-ms-fill-upper，这是目前没有其他浏览器实现的。

您可能可以用一些javascript和其他元素来伪造它。

来源

2015-07-20 16:35:29

输入类型范围内的进度条

回答

相关问题