Heim > Artikel > Web-Frontend > Wie kann ich dafür sorgen, dass ein HTML5-Bereichsschieberegler in allen Browsern vertikal angezeigt wird?

Wie kann ich dafür sorgen, dass ein HTML5-Bereichsschieberegler in allen Browsern vertikal angezeigt wird?

Barbara StreisandOriginal: 2024-10-27 09:48:03603Durchsuche

How can I make an HTML5 range slider display vertically across all browsers?

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!

html5 firefox css chrome html for Attribute this display

Stellungnahme：

Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn

Vorheriger Artikel：Wie erreicht man einen Fade-Out-Effekt in CSS3: Keyframe-Animationen vs. Übergänge?Nächster Artikel：Wie erreicht man einen Fade-Out-Effekt in CSS3: Keyframe-Animationen vs. Übergänge?

In Verbindung stehende Artikel

Mehr sehen