1

我有一个范围类型的输入

<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;
}

现场演示在这里

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

4

2 回答 2

0

::-webkit-slider-thumb不能接受content财产。尝试设置背景图像。

于 2013-01-24T13:18:19.743 回答
0

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

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

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

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

1) 将一个只有一个数字（后来用拇指的位置值更新）的元素（比如称为工具提示）放在拇指的顶部。

2）找到拇指的位置

3）将它作为工具提示的位置，使用javascript。

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

于 2019-03-17T18:24:35.863 回答