css - 如何将内容设置为-webkit-slider-thumb

Question

我有一个范围类型的输入

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

使用以下 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"; css 根本不起作用，如何在输出中将一些文本设置为红色旋钮。

Answer 1

::-webkit-slider-thumb 无法接受 content 属性。请尝试设置背景图片。