Heim >Web-Frontend >CSS-Tutorial >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:30784Durchsuche
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!