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

css的{p> content:"1";根本不起作用，如何在输出中将一些文本设置为红色旋钮。

Answer 1

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

Answer 2

::-webkit-slider-thumb不接受content属性。

听起来好像您正在尝试将“滑块”滑块用作拇指宽度值的动态工具提示。

如果是这种情况，则可以使用css在拇指上方放置一个元素，该元素通过javascript或jQuery动态获取值。

我现在正在工作，所以我可能稍后再举一个例子，但是逻辑是这样的：

1）将仅带有一个数字（后来用拇指的位置值更新）的元素（称为工具提示）放置在拇指上方。

2）找到拇指的位置

3）也使用javascript将其放置在工具提示的位置。

4）使用.innerHTML（对于jQuery，则为.html）将拇指的位置作为工具提示的值。

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

2 个答案: