如何設置內容-webkit-滑蓋拇指

<input id="counter" type="range" min="0" ></input>

的輸入與下面的CSS CSS的

#counter { 
    -webkit-appearance: none; 
    background-color: silver; 
    width: 200px; 
    height:10px; 
    border-radius:50px; 
    border-color:rgb(240, 61, 37); 
} 

#counter::-webkit-slider-thumb { 
    -webkit-appearance: none; 
    width:15px; 
    height:15px; 
    border-radius:50px; 
    content:"1"; 
    background:rgb(240, 61, 37); 
    opacity:0.95; 
}

現場演示here

content:"1";根本不工作，如何在輸出中設置一些文本爲紅色旋鈕。

來源

2013-01-24 Sudarshan

::-webkit-slider-thumb不能接受content屬性。改爲嘗試設置背景圖像。

來源

2013-01-24 13:18:19 BenM

感謝您的回答，但我的圖像內容應該是動態的，應該有1 2 3等到100，是否有任何解決方案使其成爲可能。 – Sudarshan

也許你可以使用PHP來生成動態圖像。或者，您可以使用jQuery（絕對定位）創建一個元素，並將其與滑塊一起移動。 – BenM

感謝您的回答，您能否指出我對PHP的一些新引用。 – Sudarshan

如何設置內容-webkit-滑蓋拇指

回答

相關問題