是否可以根据输入范围实际制作进度条?有人正在输入数字,条形图向右移动,拇指左侧的背景颜色发生变化,具体取决于数字的大小。这里是现场演示 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
最佳答案
目前还没有纯CSS和input[type="range"]跨浏览器的解决方案。如果您正在寻找类似 IE 的 ::-ms-fill-lower
和 ::-ms-fill-upper
的实现,其他浏览器目前还没有实现时间。
您可以使用一些 javascript 和其他元素来伪造它。
关于javascript - 输入类型范围内的进度条,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/31521523/