Question

我正在构建一个页面，我希望在一个范围内获得用户输入，但我不想事先偏向用户使用默认值。因此我要做的是有一个输入范围滑块，默认情况下有一个类可以隐藏拇指的样式，然后使用滑块的onchange事件，删除该类，以便拇指再次显示

我遇到的奇怪行为是，这适用于Safari，但不适用于Chrome（目前仅使用webkit）。一切似乎都在正确更新（例如，类被更改，并且css样式仅适用于应用的类名），但是当删除类时，拇指仍然隐藏在Chrome中。如果有任何不同，我正在使用v55.0.2883.95 for Mac。

有没有办法强制滑块元素重新检查其类并添加滑块拇指？

最小的工作示例如下：

<html>
<head>
<style>
input[type=range].drange::-webkit-slider-thumb {
    -webkit-appearance: none;
}
</style>
</head>

<script>
function onchg() {
    var s = document.getElementById('slider');
    s.className = "";
    console.log('Changed!');
};
</script>

<body>
    <input id="slider" class="drange" type="range" min="0" max="100" default="50" onchange="onchg();"/>
</body>
</html>

Answer 1

我认为这是一个错误，但很长一段时间后我找到了解决方法：

.drange2::-webkit-slider-thumb {
    -webkit-appearance: initial;
        background: black;
}

当您想要显示它时，只需在拇指上添加背景颜色。它没有显示的原因是因为它是透明的。

在Chrome中重新显示html输入范围缩略图

1 个答案: