So erstellen Sie vertikale Bereichsschieberegler in HTML5: Eine browserübergreifende Anleitung-CSS-Tutorial-php.cn

So erstellen Sie vertikale Bereichsschieberegler in HTML5: Eine browserübergreifende Anleitung

DDD

Freigeben： 2024-10-27 01:10:30

Original

713 Leute haben es durchsucht

How to Create Vertical Range Sliders in HTML5: A Cross-Browser Guide

Vertikale Ausrichtung für HTML5-Bereichsschieberegler

Beim Erstellen eines Formulareingabeschiebereglers kann die Anpassung seiner Ausrichtung für bestimmte UI-Designs von entscheidender Bedeutung sein. Während Steuerelemente bieten standardmäßig horizontale Schieberegler. In diesem Artikel werden Techniken zur vertikalen Anzeige in Browsern untersucht, die diese Funktion unterstützen.

Moderne Browser (Chrome, Firefox)

Für neuere Versionen Von Chrome und Firefox kann der folgende CSS-Stil angewendet werden, um eine vertikale Ausrichtung zu erreichen:

<code class="css">input[type=range] {
    writing-mode: vertical-lr;
    direction: rtl;
}</code>

Nach dem Login kopieren

Ältere Chrome-Browser

Für ältere Versionen von Chrome und anderen Chromium- Verwenden Sie bei Browsern, die auf der Darstellung basieren, die Eigenschaft „Erscheinungsbild“:

<code class="css">input[type=range] {
    appearance: slider-vertical;
    width: 16px;
}</code>

Nach dem Login kopieren

Alte Firefox-Browser

In frühen Firefox-Versionen wird durch Hinzufügen des Attributs „orient“ zum Element kann eine vertikale Ausrichtung erzwingen:

<code class="html"><html orient="vertical">
    ...
    <input type="range" />
    ...
</html></code>

Nach dem Login kopieren

Beispielcode

Hier ist ein vollständiges Beispiel, das alle Techniken für browserübergreifende Kompatibilität kombiniert:

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

input[type=range]:not([orient=vertical]) {
    appearance: slider-vertical;
    width: 16px;
}</code>

Nach dem Login kopieren

<code class="html"><input type="range" orient="vertical" /></code>

Nach dem Login kopieren

Durch die Implementierung dieser Techniken können Sie Schieberegler für den vertikalen Bereich effektiv anzeigen, um Ihre Formular-UI-Designs über mehrere Browser hinweg mit optimaler Kompatibilität zu verbessern.

Das obige ist der detaillierte Inhalt vonSo erstellen Sie vertikale Bereichsschieberegler in HTML5: Eine browserübergreifende Anleitung. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!