HTML-Eingabebereich-Daumen in Chrome erneut anzeigen

Ich erstelle eine Seite, auf der ich Benutzereingaben in einem Bereich erhalten möchte, aber ich möchte den Benutzer nicht vorher mit einem Standardwert vorbelasten. Was ich versuche, ist also ein Schieberegler für den Eingabebereich, der standardmäßig eine Klasse hat, die das Aussehen des Daumens verdeckt. Unter Verwendung eines 10 Ereignisses für den Schieberegler entfernen Sie die Klasse, so dass der Daumen wieder erscheint.HTML-Eingabebereich-Daumen in Chrome erneut anzeigen

Das seltsame Verhalten, das ich renne ist, dass dies in Safari funktioniert, aber nicht in Chrome (derzeit nur mit Webkit). Alles scheint sich korrekt zu aktualisieren (z. B. wird die Klasse geändert und das CSS-Design funktioniert nur mit diesem Klassennamen), aber wenn die Klasse entfernt wird, bleibt der Daumen in Chrome verborgen. Ich verwende v55.0.2883.95 für Mac, wenn das einen Unterschied macht.

Gibt es eine Möglichkeit, das Slider-Element zu zwingen, seine Klasse erneut zu überprüfen und den Slider-Daumen wieder hinzuzufügen?

Ein minimales Arbeitsbeispiel ist unten:

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

Quelle

2017-01-04 user2048508

Ich denke, das ist ein Fehler in Chrome tbh. Weißt du, was ist der Standardwert für das Aussehen? – Ced

Bitte akzeptieren und upvote :) – Ced

Ich denke, dies ist ein Bug, aber ich fand eine Verlegenheit nach langer Zeit:

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

nur eine Hintergrundfarbe mit dem Daumen hinzufügen wenn du es zeigen willst. Der Grund, warum es nicht angezeigt wurde, ist, dass es transparent war.

Quelle

2017-01-05 00:05:54 Ced

Sieht so aus als wäre dies der Fix. Vielen Dank! – user2048508

HTML-Eingabebereich-Daumen in Chrome erneut anzeigen

Antwort

Verwandte Themen