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

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

Barbara Streisand

Freigeben： 2024-10-27 09:48:03

Original

751 Leute haben es durchsucht

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>

Nach dem Login kopieren

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>

Nach dem Login kopieren

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>

Nach dem Login kopieren

Zusätzlich ist das folgende CSS erforderlich:

<code class="css">input[type=range] {
  vertical-align: bottom;
}</code>

Nach dem Login kopieren

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>

Nach dem Login kopieren

<code class="css">input[type=range][orient=vertical] {
  writing-mode: vertical-lr;
  direction: rtl;
  appearance: slider-vertical;
  width: 16px;
  vertical-align: bottom;
}</code>

Nach dem Login kopieren

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!