在Chrome中重新顯示html輸入範圍拇指

我正在構建一個頁面，我想要在某個範圍內獲得用戶輸入，但我不希望事先將用戶偏置爲默認值。因此，我試圖做的是有一個輸入範圍滑塊，默認情況下它有一個具有樣式以隱藏拇指的類，然後使用滑塊的onchange事件，刪除類以便拇指再次出現。在Chrome中重新顯示html輸入範圍拇指

我遇到的奇怪的行爲是，它適用於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>

來源

2017-01-04 user2048508

我認爲這是一個鉻tbh的錯誤。你知道外觀的默認值是什麼嗎？ – Ced

請接受和upvote :) – Ced

，我認爲這是一個錯誤，但我找到了解決時間長了以後：

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

只需添加一個背景色，以拇當你想展示它。它沒有顯示的原因是因爲它是透明的。

來源

2017-01-05 00:05:54 Ced

看起來像這是修復。謝謝！ – user2048508

在Chrome中重新顯示html輸入範圍拇指

回答

相關問題