Quer Browser vertikalen Eingangsbereich Slider mit Custom-Styling

Question

Slider CSS funktioniert in Firefox wie gewünscht

funktioniert in Chrome nicht funktionieren

Problem Ausarbeitung

Here's a sample , die bei Firefox die gewünschten Ergebnisse liefert, bei Chrome jedoch nicht .

• Das Hauptproblem ist, dass ich dies zu brauchen scheinen für Chrome zu haben: -webkit-appearance: slider-vertical; - probieren Sie es in der Probe zu entfernen und in Chrome anzuzeigen und der Eingangsbereich wird eher horizontal als vertikal
• Aber dann als Ergebnis kann ich das einheimische Visuals nicht verbergen, dass ich mit dem Custom-Styling ersetzt habe, mit -webkit-appearance: none;
• ich sich nicht verbergen kann, weil es die gleiche Eigenschaft dh -webkit-appearance ist, kann nicht sein, sowohl slider-vertical und none in unserem nicht-Quanten CSS (siehe unter [type='range'] Selektor)

Answer 1

Wie in this answer vorgeschlagen, verwenden Sie transform, um den Schieberegler vertikal zu stellen, sodass Sie -webkit-appearance auf none setzen können.