Chromeでhtml入力範囲のサムを再表示

範囲内でユーザー入力を取得したいページを作成していますが、あらかじめユーザーにデフォルト値をバイアスしたくありません。したがって、私がしようとしているのは、入力範囲スライダを持つことです。デフォルトでは、親を非表示にするスタイリングを持つクラスがあり、次にスライダにonchangeイベントを使用して、親が再び表示されるようにクラスを削除します。Chromeでhtml入力範囲のサムを再表示

私はに実行している奇妙な振る舞いが、これはSafariで動作しますが、ないクロム（現在はwebkitのを使用して）ということです。すべてが正しく更新されているようです（たとえば、クラスが変更され、CSSスタイルが適用されたクラス名のみが適用されます）が、クラスが削除されると、親指はChromeに隠されたままになります。私はそれが何か違いがあれば、Mac用にv55.0.2883.95を使用しています。

強制的にスライダー要素のクラスを再確認し、スライダーの親を後ろに追加する方法はありますか？

最小限の作業例は以下の通りです：

<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

これはchrome tbhのバグだと思います。外観のデフォルト値は何ですか？ – Ced

受け入れてupvote :) – Ced

私はこれはバグだと思うが、私は長い時間の後に修正が見つかりました：

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

ちょうど親指に背景色を追加しますあなたがそれを見せたいときに。それが表示されなかった理由は、それが透明だったためです。

出典

2017-01-05 00:05:54 Ced

これは修正のように見えます。ありがとう！ – user2048508

Chromeでhtml入力範囲のサムを再表示

答えて

関連する問題