輸入類型範圍內的進度條

實際上是否可以在輸入範圍內生成進度條？有人正在鍵入一個數字，而條形圖正在向右移動，並在拇指左側改變了背景顏色，取決於數字的大小。下面是現場演示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

輸入類型範圍內的進度條

回答

相關問題