Vertikale Ausrichtung des HTML5-Bereichsschiebereglers
Die vertikale Anzeige eines Bereichsschiebereglers in HTML5 hat sich aufgrund von Inkonsistenzen zwischen den Browsern als Herausforderung erwiesen. Um dies zu erreichen, sind je nach Browserunterstützung verschiedene Methoden erforderlich.
Moderne Browser (Chrome und Firefox >=2024)
Für aktuelle Versionen von Chrome und Firefox , erweist sich die folgende Lösung als effektiv:
<code class="css">input[type=range] {
writing-mode: vertical-lr;
direction: rtl;
width: 16px;
}</code>Dieser Ansatz richtet den Schieberegler vertikal aus, wobei die Richtung: rtl dafür sorgt, dass durch Hochschieben der Wert erhöht und durch Herunterschieben verringert wird.
Legacy Chrome (und andere Chromium-basierte Browser)
Für ältere Versionen von Chrome und Chromium-basierten Browsern funktioniert Folgendes:
<code class="css">input[type=range] {
appearance: slider-vertical;
width: 16px; /* Optional, suggested to match newer browsers */
}</code>Diese Lösung erzwingt, dass der Schieberegler aktiviert ist wird vertikal angezeigt, obwohl es möglicherweise nicht den gewünschten Stil übernimmt (z. B. Spur- und Daumendarstellung).
Legacy Firefox
Für ältere Versionen von Firefox ein orient-Attribut darin Das HTML-Element ist erforderlich:
<code class="html"><html orient="vertical">
<body>
<input type="range" />
</body>
</html></code>Zusätzlich ist das folgende CSS erforderlich:
<code class="css">input[type=range] {
vertical-align: bottom;
}</code>Diese Methode richtet den Schieberegler vertikal aus, es kann jedoch zu Einschränkungen bei der Handhabung von Stilen und der Benutzerinteraktion kommen .
Kompatibles Beispiel
Der folgende Codeausschnitt stellt ein Beispiel dar, das in allen gängigen Browsern funktionieren sollte (Stand April 2024):
<code class="html"><input type="range" orient="vertical" /></code>
<code class="css">input[type=range][orient=vertical] {
writing-mode: vertical-lr;
direction: rtl;
appearance: slider-vertical;
width: 16px;
vertical-align: bottom;
}</code>Diese umfassende Lösung stellt sicher, dass der Bereichsschieberegler in verschiedenen Browserversionen einheitlich vertikal angezeigt wird.
Das obige ist der detaillierte Inhalt vonWie kann ich dafür sorgen, dass ein HTML5-Bereichsschieberegler in allen Browsern vertikal angezeigt wird?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!
