Vertikale Formularsteuerelemente erstellen

Grundlegende Vorgehensweise

In modernen Browsern können Sie die Eigenschaft writing-mode auf einen vertikalen Wert setzen, um Formularsteuerelemente mit normalerweise horizontal angeordneten Schriftzeichen (beispielsweise in lateinischen Sprachen) vertikal darzustellen. Der Text wird dabei gegenüber der Standardausrichtung um 90 Grad gedreht. Normalerweise vertikal angeordnete Schriftzeichen, etwa im Chinesischen oder Japanischen, bleiben davon unberührt.

Dies ist nützlich, wenn Sie Formulare für vertikal geschriebene Sprachen erstellen.

Im Einzelnen gilt:

• writing-mode: vertical-lr erzeugt vertikale Formularsteuerelemente mit einer Blockflussrichtung von links nach rechts. Bei Steuerelementen mit Zeilenumbruch oder mehreren Textzeilen erscheinen nachfolgende Zeilen rechts von den vorherigen.
• writing-mode: vertical-rl erzeugt vertikale Formularsteuerelemente mit einer Blockflussrichtung von rechts nach links. Bei Steuerelementen mit Zeilenumbruch oder mehreren Textzeilen erscheinen nachfolgende Zeilen links von den vorherigen.

Sie könnten die Steuerelemente auch mit einer Transformation um 90 Grad drehen. Dadurch würden sie jedoch auf einer eigenen Ebene platziert, was unbeabsichtigte Auswirkungen auf das Layout haben kann, etwa die Überlagerung anderer Inhalte. writing-mode bietet eine zuverlässigere Lösung.

Zusätzlich können Sie mit der Eigenschaft direction die Richtung des Inhalts innerhalb der Steuerelemente festlegen:

• direction: ltr bewirkt, dass der Inhalt oben beginnt und nach unten verläuft.
• direction: rtl bewirkt, dass der Inhalt unten beginnt und nach oben verläuft.

Mit der Eigenschaft direction können Sie die Inline-Grundrichtung festlegen – die Hauptrichtung, in der Inhalte innerhalb einer Zeile angeordnet werden. Sie bestimmt, auf welcher Seite sich der „Anfang“ und das „Ende“ einer Zeile befinden. Bei textbasierten Formularsteuerelementen ist der Unterschied deutlich: Der Textfluss beginnt oben oder unten. Bei nicht textbasierten Steuerelementen wie Schiebereglern bestimmt direction, in welcher Richtung das Steuerelement dargestellt wird. Wenn Sie beispielsweise direction: ltr für einen vertikalen Schieberegler festlegen, befindet sich der niedrigste Wert oben und der höchste unten.

Die folgenden Abschnitte zeigen anhand von Beispielen, wie Sie verschiedene Arten vertikaler Formularsteuerelemente erstellen. Die genauen Angaben zur Unterstützung der einzelnen Typen finden Sie in den Informationen zur Browser-Kompatibilität auf den jeweils verlinkten Referenzseiten.

Schieberegler, Messanzeigen und Fortschrittsbalken

Sehen wir uns an, wie Sie vertikale Schieberegler, Messanzeigen und Fortschrittsbalken erstellen.

Grundlegendes Beispiel

Eine typische Gruppe visueller Steuerelemente aus einem Schieberegler mit <input type="range">, einem <progress>-Element und einem <meter>-Element wird so erstellt:

<input type="range" min="0" max="11" value="9" step="1" />
<meter id="fuel" min="0" max="100" low="33" high="66" optimum="80" value="20">
  at 50/100
</meter>
<progress id="file" max="100" value="70">70%</progress>

Um die Steuerelemente vertikal darzustellen, können Sie folgendes CSS verwenden:

input[type="range"],
meter,
progress {
  margin-block-end: 20px;
  writing-mode: vertical-lr;
}

writing-mode: vertical-lr (und vertical-rl) sorgt in modernen Browsern dafür, dass die Steuerelemente vertikal dargestellt werden.

Das Ergebnis sieht so aus:

Das Steuerelement von unten nach oben darstellen

Standardmäßig haben die Steuerelemente für direction den Wert ltr. Dadurch werden Schieberegler, Messanzeigen und Fortschrittsbalken wie oben gezeigt von oben nach unten dargestellt.

Sie können dies ändern, indem Sie direction: rtl festlegen. Dadurch werden sie stattdessen von unten nach oben dargestellt:

<input type="range" min="0" max="11" value="9" step="1" />
<meter id="fuel" min="0" max="100" low="33" high="66" optimum="80" value="20">
  at 50/100
</meter>
<progress id="file" max="100" value="70">70%</progress>

input[type="range"],
meter,
progress {
  margin-block-end: 20px;
  writing-mode: vertical-lr;
  direction: rtl;
}

Das Ergebnis sieht so aus:

Vertikale Schieberegler in älteren Browsern erstellen

In älteren Browsern, die das Erstellen vertikaler Formularsteuerelemente mit writing-mode und direction nicht unterstützen, gibt es nur eingeschränkte Alternativen. Die folgenden Möglichkeiten funktionieren ausschließlich bei <input type="range"> und bewirken, dass der Text von unten nach oben verläuft. Auf <meter>- und <progress>-Elemente haben sie keine Auswirkung:

• Die nicht standardisierte Eigenschaft appearance: slider-vertical kann in älteren Versionen von Safari und Chrome verwendet werden.
• Das nicht standardisierte Attribut orient="vertical" kann in älteren Versionen von Firefox direkt zum <input type="range">-Element hinzugefügt werden.

Der HTML-Code für dieses Beispiel enthält nur einen Schieberegler mit <input type="range">. Durch orient="vertical" wird er in älteren Firefox-Versionen vertikal dargestellt:

<input type="range" min="0" max="11" value="9" step="1" orient="vertical" />

Damit das Steuerelement auch in älteren Versionen von Chrome und Safari vertikal dargestellt wird, können Sie appearance: slider-vertical verwenden:

input[type="range"] {
  margin-block-end: 20px;
  appearance: slider-vertical;
}

Das Ergebnis sieht so aus:

Select-Elemente

In diesem Abschnitt erfahren Sie, wie Sie vertikale <select>-Elemente einsetzen.

Grundlegendes Beispiel für Select-Elemente

Der folgende HTML-Code erstellt zwei <select>-Elemente: eines, bei dem nur ein Eintrag ausgewählt werden kann, und eines, bei dem mehrere Einträge ausgewählt werden können:

<select multiple>
  <option>First</option>
  <option>Second</option>
  <option>Third</option>
  <option>Fourth</option>
  <option>Fifth</option>
</select>
<select>
  <option>First</option>
  <option>Second</option>
  <option>Third</option>
  <option>Fourth</option>
  <option>Fifth</option>
</select>

Um die Steuerelemente vertikal darzustellen, können Sie folgendes CSS verwenden:

select {
  inline-size: 100px;
  margin-block-end: 20px;
  writing-mode: vertical-rl;
}

Das Ergebnis sieht so aus:

Textrichtung und Reihenfolge der Optionen anpassen

Auch hier können Sie die Eigenschaft direction auf rtl setzen, damit der Text statt standardmäßig von oben nach unten von unten nach oben verläuft.

Beachten Sie außerdem, dass im obigen Beispiel die Inline-Richtung der Optionen von rechts nach links verläuft, weil wir writing-mode: vertical-rl verwendet haben. Wenn wir stattdessen writing-mode: vertical-lr verwenden, erscheint der Text der <option>-Elemente von links nach rechts.

Wir untersuchen diese beiden Anwendungsfälle anhand von drei <select>-Elementen als Listenfelder (multiple), damit sich die Auswirkungen direkt vergleichen lassen.

<div class="controls">
  <div>
    <h2>writing-mode: vertical-lr</h2>
    <select multiple>
      <option>First</option>
      <option>Second</option>
      <option>Third</option>
      <option>Fourth</option>
      <option>Fifth</option>
    </select>
  </div>
  <div class="direction">
    <h2>direction: rtl & writing-mode: vertical-lr</h2>
    <select multiple>
      <option>First</option>
      <option>Second</option>
      <option>Third</option>
      <option>Fourth</option>
      <option>Fifth</option>
    </select>
  </div>
  <div class="reverse-option-order">
    <h2>writing-mode: vertical-rl</h2>
    <select multiple>
      <option>First</option>
      <option>Second</option>
      <option>Third</option>
      <option>Fourth</option>
      <option>Fifth</option>
    </select>
  </div>
</div>

Im CSS für dieses Beispiel legen wir für die drei Listenfelder folgende Eigenschaften fest:

1. writing-mode: vertical-rl: Die Darstellung entspricht dem vorherigen Beispiel – der Text verläuft von oben nach unten und die Optionen werden von rechts nach links angeordnet.
2. writing-mode: vertical-rl und direction: rtl: Die Optionen werden von rechts nach links angeordnet, aber der Textfluss wird umgekehrt und verläuft von unten nach oben.
3. writing-mode: vertical-lr: Der Text verläuft von oben nach unten, während die Reihenfolge der Optionen umgekehrt wird und von links nach rechts verläuft.

.controls {
  box-sizing: border-box;
  display: flex;
  gap: 20px;
  font-family: sans-serif;
}

h2 {
  margin-top: 0;
  font-size: 1rem;
  text-align: center;
  flex: 1 0 100%;
}

.controls > div {
  margin-bottom: 20px;
  flex: 1;
  display: flex;
  align-items: flex-start;
  justify-content: space-around;
  flex-flow: row wrap;
}

select {
  inline-size: 100px;
  margin-block-end: 20px;
  writing-mode: vertical-rl;
}

.direction select {
  direction: rtl;
}

.reverse-option-order select {
  writing-mode: vertical-lr;
}

Das Ergebnis sieht so aus:

Buttons

In diesem Abschnitt erfahren Sie, wie Sie vertikale <button>-Elemente einsetzen. Beachten Sie, dass wir in den folgenden Beispielen zwar nur ein <button>-Element verwenden, das Verhalten bei anderen Elementen, die Buttons erzeugen, jedoch gleich ist. Dazu gehören <input>-Typen wie button, reset und submit.

Grundlegendes Button-Beispiel

Der folgende HTML-Code erstellt zwei <button>-Elemente: eines mit einer Textzeile und eines mit drei Textzeilen:

<button>Press me</button> <button>Press me<br />Please?<br />Thanks</button>

Um die Buttons vertikal darzustellen, können Sie folgendes CSS verwenden:

button {
  inline-size: 100px;
  margin-block-end: 20px;
  writing-mode: vertical-rl;
}

Das Ergebnis sieht so aus:

Reihenfolge der Textzeilen in Buttons anpassen

Wenn Sie den Wert von writing-mode von vertical-rl auf vertical-lr ändern, erscheinen nachfolgende Textzeilen rechts statt links von den vorherigen Zeilen.

Dieses Beispiel verwendet zwei Exemplare des Buttons mit drei Textzeilen aus dem vorherigen Beispiel. So können Sie die Auswirkungen der Änderung von writing-mode leicht erkennen:

<div>
  <h2>writing-mode: vertical-lr</h2>
  <button>Press me<br />Please?<br />Thanks</button>
</div>
<div class="reverse-line-order">
  <h2>writing-mode: vertical-rl</h2>
  <button>Press me<br />Please?<br />Thanks</button>
</div>

Im CSS setzen wir writing-mode: vertical-rl für den ersten Button, um die Zeilen von rechts nach links anzuordnen. Für den zweiten Button setzen wir writing-mode: vertical-lr, um die Reihenfolge der Zeilen umzukehren – von links nach rechts:

body {
  box-sizing: border-box;
  display: flex;
  gap: 20px;
  font-family: sans-serif;
}

h2 {
  margin-top: 0;
  font-size: 1rem;
  text-align: center;
  flex: 1 0 100%;
}

div {
  margin-bottom: 20px;
  flex: 1;
  display: flex;
  align-items: flex-start;
  justify-content: space-around;
  flex-flow: row wrap;
}

button {
  inline-size: 100px;
  margin-block-end: 20px;
  writing-mode: vertical-rl;
}

.reverse-line-order button {
  writing-mode: vertical-lr;
}

Das Ergebnis sieht so aus:

Textbasierte Formularsteuerelemente

Zum Schluss sehen wir uns vertikale <textarea>-Elemente und textbasierte <input>-Typen an. Beachten Sie, dass wir in den folgenden Beispielen zwar nur ein <input type="text">-Element verwenden, das Verhalten bei anderen textbasierten <input>-Typen jedoch gleich ist: password, number, url und weitere.

Grundlegendes Beispiel für ein Texteingabefeld und ein Textarea-Element

Der folgende HTML-Code erstellt ein <textarea>-Element und ein <input type="text">-Element:

<textarea>This is my textarea</textarea>
<input type="text" value="Input text" />

Um das Eingabefeld und das Textarea-Element vertikal darzustellen, können Sie folgendes CSS verwenden:

textarea,
input[type="text"] {
  inline-size: 100px;
  margin-block-end: 20px;
  writing-mode: vertical-rl;
}

Das Ergebnis sieht so aus:

Textrichtung und Reihenfolge der Zeilen anpassen

Sie können die Eigenschaft direction auf rtl setzen, damit der Text statt standardmäßig von oben nach unten von unten nach oben verläuft. Außerdem können Sie writing-mode auf vertical-lr statt auf vertical-rl setzen, damit mehrere Textzeilen in <textarea>-Elementen von links nach rechts statt standardmäßig von rechts nach links angeordnet werden.

Dieses Beispiel verwendet drei Exemplare derselben Textsteuerelemente wie im vorherigen Beispiel. So können Sie die Auswirkungen der beschriebenen Änderungen an direction und writing-mode leicht erkennen:

<div class="controls">
  <div>
    <h2>writing-mode: vertical-lr</h2>
    <textarea>This is my textarea</textarea>
    <input type="text" value="Input text" />
  </div>
  <div class="direction">
    <h2>direction: rtl & writing-mode: vertical-lr</h2>
    <textarea>This is my textarea</textarea>
    <input type="text" value="Input text" />
  </div>
  <div class="reverse-line-order">
    <h2>writing-mode: vertical-rl</h2>
    <textarea>This is my textarea</textarea>
    <input type="text" value="Input text" />
  </div>
</div>

Im CSS legen wir für die drei Gruppen von Textsteuerelementen folgende Eigenschaften fest:

1. writing-mode: vertical-rl: Die Darstellung entspricht dem vorherigen Beispiel – der Text verläuft von oben nach unten und die Zeilen werden von rechts nach links angeordnet.
2. writing-mode: vertical-rl und direction: rtl: Die Zeilen werden von rechts nach links angeordnet, aber der Textfluss wird umgekehrt und verläuft von unten nach oben.
3. writing-mode: vertical-lr: Der Text verläuft von oben nach unten, aber die Reihenfolge der Zeilen wird umgekehrt – von links nach rechts. Beachten Sie, dass dies keine Auswirkung auf <input type="text">-Elemente hat, da diese immer einzeilig sind.

.controls {
  box-sizing: border-box;
  display: flex;
  gap: 20px;
  font-family: sans-serif;
}

h2 {
  margin-top: 0;
  font-size: 1rem;
  text-align: center;
  flex: 1 0 100%;
}

.controls > div {
  margin-bottom: 20px;
  flex: 1;
  display: flex;
  align-items: flex-start;
  justify-content: space-around;
  flex-flow: row wrap;
}

textarea,
input[type="text"] {
  inline-size: 100px;
  margin-block-end: 20px;
  writing-mode: vertical-rl;
}

.direction textarea,
.direction input[type="text"] {
  writing-mode: vertical-rl;
  direction: rtl;
}

.reverse-line-order textarea,
.reverse-line-order input[type="text"] {
  writing-mode: vertical-lr;
}

Das Ergebnis sieht so aus:

Siehe auch

• Das <input>-Element.
• Weitere relevante Elemente: <button>, <meter>, <progress> und <select>.
• Lernen: Mit unterschiedlichen Textrichtungen umgehen
• Webformulare gestalten