我正在构建一个页面，我希望在某个范围内获取用户输入，但我不想预先使用默认值来偏见用户。因此，我想做的是有一个输入范围 slider ，默认情况下有一个具有隐藏拇指的样式的类，然后使用 slider 的 onchange 事件，删除该类，以便拇指再次出现。
我遇到的奇怪行为是，这在 Safari 中有效，但在 Chrome 中无效(目前仅使用 webkit)。一切似乎都正确更新(例如，类被更改，CSS 样式仅适用于应用的类名)，但当类被删除时，拇指在 Chrome 中仍然隐藏。如果这有什么不同的话，我正在使用 Mac 版 v55.0.2883.95。
有什么方法可以强制 slider 元素重新检查其类并将 slider 添加回来吗？
下面是一个最小的工作示例:
<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>
最佳答案
我认为这是一个错误，但很长时间后我找到了修复:
.drange2::-webkit-slider-thumb {
-webkit-appearance: initial;
background: black;
}
当你想显示它时，只需为拇指添加背景颜色即可。它没有显示的原因是因为它是透明的。
关于javascript - 在 Chrome 中重新显示 html 输入范围拇指，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/41474912/