field-sizing

content

Ermöglicht dem Element, seine Größe an den Inhalt anzupassen.

fixed

Legt eine feste Größe für das Element fest. Dies ist der Standardwert.

field-sizing: content überschreibt die standardmäßig bevorzugte Größe von Formularelementen. Diese Einstellung bietet eine einfache Möglichkeit, Textfelder zu konfigurieren, damit sie sich an den Inhalt anpassen und wachsen, wenn mehr Text eingegeben wird. Sie hören auf, zu wachsen, wenn sie maximale Größenlimits erreichen (definiert durch die Größe ihres enthaltenden Elements oder festgelegt via CSS), woraufhin Scrollen erforderlich ist, um den gesamten Inhalt anzuzeigen.

field-sizing zu content wirkt sich spezifisch auf die folgenden Elemente aus:

• Formulareingabetypen, die direkte Texteingabe von Benutzern annehmen. Dies umfasst die Typen email, number, password, search, tel, text und url.
  • Wenn keine Mindestbreite für das Steuerungselement festgelegt ist, wird es nur so breit sein wie der Textcursor.
  • Steuerungselemente mit placeholder-Attributen werden groß genug gerendert, um den Platzhaltertext anzuzeigen.
  • Das size-Attribut ändert die standardmäßig bevorzugte Größe solcher <input>-Elemente. Folglich hat size keine Auswirkung auf <input>-Elemente, die field-sizing: content gesetzt haben.
• file Eingaben. Direkte Texteingabe ist nicht möglich; jedoch ändert sich der angezeigte Dateiname, wenn der Benutzer eine neue Datei zum Hochladen auswählt. Wenn field-sizing: content gesetzt ist, ändert sich die Größe des Steuerungselements, um den Dateinamen anzupassen.
• <textarea> Steuerungselemente. Es ist erwähnenswert, dass <textarea>-Elemente mit field-sizing: content sich ähnlich wie einzeilige Texteingaben verhalten, mit folgenden Ergänzungen:
  • Wenn <textarea>-Elemente aufgrund einer Breitenbeschränkung nicht wachsen können, beginnen sie, in der Höhe zu wachsen, um zusätzliche Zeilen des Inhalts anzuzeigen. Wird dann eine Höhenbeschränkung erreicht, beginnen sie, eine Scrollleiste anzuzeigen, damit der gesamte Inhalt angezeigt werden kann.
  • rows und cols-Attribute ändern die standardmäßig bevorzugte Größe eines <textarea>. Folglich haben rows/cols keine Auswirkung auf <textarea>-Elemente, die field-sizing: content gesetzt haben.
• <select> Steuerungselemente. Diese verhalten sich etwas anders als erwartet, wenn field-sizing: content gesetzt ist. Die Auswirkung hängt vom Typ des <select>-Steuerungselements ab, das Sie erstellen:
  • Normale Drop-Down-Boxen ändern ihre Breite, um immer den angezeigten Optionswert anzupassen, wenn neue Werte ausgewählt werden. (Standardmäßig ist die Größe des Drop-Downs so eingestellt, dass der längste Optionswert angezeigt wird.)
  • Listboxen (<select>-Elemente mit dem multiple oder size-Attribut) werden groß genug sein, um alle Optionen ohne Scrollen anzuzeigen. (Standardmäßig erfordert die Drop-Down-Box Scrollen, um alle Optionswerte anzuzeigen.)
  • Das size-Attribut hat sehr wenig Auswirkung auf <select>-Elemente, die field-sizing: content gesetzt haben. In solchen Fällen überprüft der Browser, ob size gleich 1 ist, um festzustellen, ob das <select>-Steuerungselement als Dropdown oder als Listbox erscheinen soll. Es wird jedoch immer alle Optionen einer Listbox anzeigen, selbst wenn size kleiner ist als die Anzahl der Optionen.

Die Flexibilität der Größenänderung, die durch field-sizing: content für Formularelemente bereitgestellt wird, kann überschrieben werden, wenn Sie andere CSS-Größeneigenschaften verwenden. Vermeiden Sie es, eine feste width und height festzulegen, wenn Sie field-sizing: content verwenden, da diese eine feste Größe auf das Steuerungselement aufzwingen. Die Verwendung von Eigenschaften wie min-width und max-width neben field-sizing: content ist jedoch sehr effektiv, da sie dem Steuerungselement erlauben, mit dem eingegebenen Text zu wachsen und zu schrumpfen und gleichzeitig verhindern, dass das Steuerungselement zu groß oder zu klein wird.

Das maxlength-Attribut führt dazu, dass das Steuerungselement aufhört, in der Größe zu wachsen, wenn das maximale Zeichenlimit erreicht ist.

field-sizing = 
  fixed    |
  content  

Dieses Beispiel zeigt die Wirkung von field-sizing: content auf einzeilige und mehrzeilige Textfelder. Die Felder passen ihre Größe an, wenn Text hinzugefügt oder entfernt wird, und passen sich so effektiv an den Inhalt an, bis ein unteres oder oberes Größenlimit erreicht wird.

HTML

Das HTML in diesem Beispiel enthält drei Formularfelder, jeweils mit einem zugehörigen <label>: zwei <input>-Elemente der Typen text und email und ein <textarea>-Element.

<div>
  <label for="name">Enter name:</label>
  <input type="text" id="name" maxlength="50" />
</div>
<div>
  <label for="email">Enter email:</label>
  <input type="email" id="email" maxlength="50" placeholder="e.g. a@b.com" />
</div>
<div>
  <label for="comment">Enter comment:</label>
  <textarea id="comment">This is a comment.</textarea>
</div>

Beachten Sie die folgenden Punkte im HTML:

• Die ersten beiden Felder haben ein maxlength-Attribut gesetzt, das das Wachsen des Feldes verhindert, wenn das Zeichenlimit erreicht ist.
• Das <textarea> wächst in der Inline-Richtung, bis die Grenze der min-width-Einschränkung (im untenstehenden CSS-Code festgelegt) erreicht ist, und beginnt dann, neue Zeilen in der Block-Richtung hinzuzufügen, um nachfolgende Zeichen aufzunehmen.
• Das email-Eingabefeld hat einen Platzhalter gesetzt. Dieses bewirkt, dass das Feld groß genug gerendert wird, um den gesamten Platzhalter anzuzeigen. Sobald das Feld fokussiert wird und der Benutzer zu tippen beginnt, ändert das Feld seine Größe auf den min-width-Wert. Das text-Feld, das keinen Platzhalter hat, wird initial bei min-width gerendert.

CSS

Im CSS stellen wir field-sizing: content auf die drei Formularfelder, zusammen mit einer min-width und max-width, um die Eingabegröße zu begrenzen. Es ist wichtig zu wiederholen, dass, wenn keine Mindestbreite auf den Feldern gesetzt wäre, sie nur so breit gerendert würden, wie der Textcursor.

Wir geben den <label>-Elementen auch ein grundlegendes Styling, damit sie ordentlich neben den Feldern sitzen.

body {
  box-sizing: border-box;
  padding: 20px;
}

div {
  margin-bottom: 20px;
  display: flex;
}

input,
textarea {
  field-sizing: content;
  min-width: 50px;
  max-width: 350px;
}

label {
  width: 150px;
  margin-right: 20px;
  text-align: right;
}

Ergebnis

Versuchen Sie, Text in die Felder einzugeben und zu entfernen, um die Auswirkungen von field-sizing: content zusammen mit anderen Größenoptionen zu erkunden.

Dieses Beispiel zeigt die Auswirkung von field-sizing: content auf <select>-Elemente, sowohl Dropdown-Menütypen als auch mehrzeilige Listbox-Typen.

HTML

Das HTML enthält zwei Sätze von <select>-Elementen: einen mit angewendetem field-sizing: content und einen ohne, damit Sie den Unterschied sehen können (obwohl der Effekt möglicherweise weniger offensichtlich ist als bei Textfeldern). Jeder Satz enthält einen Dropdown-Menütyp und einen mehrzeiligen Listbox-Typ (mit dem multiple-Attribut gesetzt).

<div class="field-sizing">
  <h2>With <code>field-sizing: content</code></h2>
  <select>
    <option>Bananas</option>
    <option>Strawberries</option>
    <option selected>Apples</option>
    <option>Raspberries</option>
    <option>Pomegranate</option>
  </select>
  <select multiple>
    <option>Bananas</option>
    <option>Strawberries</option>
    <option>Apples</option>
    <option>Raspberries</option>
    <option>Pomegranate</option>
  </select>
</div>
<div>
  <h2>Without <code>field-sizing: content</code></h2>
  <select>
    <option>Bananas</option>
    <option>Strawberries</option>
    <option selected>Apples</option>
    <option>Raspberries</option>
    <option>Pomegranate</option>
  </select>
  <select multiple>
    <option>Bananas</option>
    <option>Strawberries</option>
    <option>Apples</option>
    <option>Raspberries</option>
    <option>Pomegranate</option>
  </select>
</div>

CSS

Im CSS ist field-sizing: content nur auf den ersten Satz von <select>-Elementen gesetzt.

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;
}

.field-sizing select {
  field-sizing: content;
}

Ergebnis

Beachten Sie die folgenden Auswirkungen von field-sizing: content:

• Das Dropdown-Menü passt immer zur Größe der angezeigten Option und ändert seine Größe, wenn verschiedene Optionen ausgewählt werden. Ohne field-sizing: content bleibt die Größe so breit wie die längste Option.
• Die Multi-Select-Listbox zeigt alle Optionen auf einmal an. Ohne field-sizing: content muss der Benutzer die Box scrollen, um alle Optionen anzuzeigen.

• <input>
• <select>
• <textarea>