Heim > Artikel > Web-Frontend > So erstellen Sie vertikale Bereichsschieberegler in HTML5: Eine browserübergreifende Anleitung

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

DDDOriginal: 2024-10-27 01:10:30700Durchsuche

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>

Ä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>

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>

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>

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

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!

html5 firefox css chrome html for while Attribute Property default this display input ui

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：Hier sind einige Titeloptionen, die sich auf die Frage der Kombination von „:after“ und „:hover“ konzentrieren: Option 1 (direkt und prägnant): * Wie erstelle ich einen schwebenden Pfeil mit :after und :hover in CSS? Option 2Nächster Artikel：Hier sind einige Titeloptionen, die sich auf die Frage der Kombination von „:after“ und „:hover“ konzentrieren: Option 1 (direkt und prägnant): * Wie erstelle ich einen schwebenden Pfeil mit :after und :hover in CSS? Option 2

In Verbindung stehende Artikel

Mehr sehen