field-sizing

Syntax

/* Keyword values */
field-sizing: content;
field-sizing: fixed;

/* Global values */
field-sizing: inherit;
field-sizing: initial;
field-sizing: revert;
field-sizing: revert-layer;
field-sizing: unset;

Werte

content

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

fixed

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

Beschreibung

field-sizing: content überschreibt die standardmäßige bevorzugte Größe von Formularelementen. Diese Einstellung bietet eine einfache Möglichkeit, Textfelder so zu konfigurieren, dass sie ihren Inhalt umschließen und wachsen, wenn mehr Text eingegeben wird. Sie hören auf zu wachsen, wenn sie ihre maximalen Größenbeschränkungen erreichen (definiert durch die Größe des umgebenden Elements oder über CSS festgelegt), woraufhin ein Scrollen erforderlich ist, um den gesamten Inhalt anzuzeigen.

Elemente, die von field-sizing: content betroffen sind

Konkret wirkt sich field-sizing mit dem Wert content auf folgende Elemente aus:

• Formulareingabetypen, die direkte Texteingaben von Benutzern akzeptieren. Dies schließt email, number, password, search, tel, text und url Typen ein.
  • Wenn keine Mindestbreite für das Steuerelement festgelegt ist, wird es nur so breit wie der Textcursor.
  • Steuerelemente mit placeholder-Attributen werden groß genug angezeigt, um den Platzhaltertext darzustellen.
  • Das size-Attribut ändert die standardmäßige bevorzugte Größe solcher <input>-Elemente. Daher hat size keinen Effekt auf <input>-Elemente mit field-sizing: content.
• file-Eingaben. Direkte Texteingaben sind nicht möglich; allerdings ändert sich der angezeigte Dateiname, wenn der Benutzer eine neue Datei zum Hochladen auswählt. Wenn field-sizing: content eingestellt ist, ändert sich die Größe des Steuerelements, um den Dateinamen zu umschließen.
• <textarea>-Steuerelemente. Es ist erwähnenswert, dass <textarea>-Elemente mit field-sizing: content wie einzeilige Texteingaben funktionieren, 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 Inhaltsreihen anzuzeigen. Wird dann eine Höhenbeschränkung erreicht, wird ein Scrollbalken eingeblendet, um den gesamten Inhalt anzuzeigen.
  • Die rows und cols-Attribute ändern die standardmäßige bevorzugte Größe eines <textarea>. Daher haben rows/cols keine Auswirkung auf <textarea>-Elemente mit field-sizing: content.
• <select>-Steuerelemente. Diese verhalten sich etwas anders als erwartet, wenn field-sizing: content eingestellt ist. Der Effekt hängt vom Typ des erstellten <select>-Steuerelements ab:
  • Normale Dropdown-Boxen ändern ihre Breite, um immer den angezeigten Optionswert anzupassen, wenn neue Werte ausgewählt werden. (Standardmäßig ist die Größe des Dropdowns groß genug, um den längsten Optionswert anzuzeigen.)
  • Listenfelder (<select>-Elemente mit dem multiple oder size-Attribut) sind groß genug, um alle Optionen anzuzeigen, ohne scrollen zu müssen. (Standardmäßig erfordert die Dropdown-Box ein Scrollen, um alle Optionswerte anzuzeigen.)
  • Das size-Attribut hat kaum Auswirkungen auf <select>-Elemente, die field-sizing: content eingestellt haben. In solchen Fällen überprüft der Browser, ob die size gleich 1 ist, um zu bestimmen, ob das <select>-Steuerelement als Dropdown oder Listenfeld angezeigt werden soll. Es werden jedoch immer alle Optionen eines Listenfeldes angezeigt, selbst wenn size kleiner als die Anzahl der Optionen ist.

field-sizing-Interaktion mit anderen Größeneinstellungen

Die durch field-sizing: content gebotene Größeneffizienz von Formularelementen kann überschrieben werden, wenn Sie andere CSS-Größeneigenschaften verwenden. Vermeiden Sie das Festlegen einer festen width und height, wenn Sie field-sizing: content verwenden, da sie eine feste Größe des Steuerelements erneut auferlegen. Das Verwenden von Eigenschaften wie min-width und max-width zusammen mit field-sizing: content ist sehr effektiv, da sie es dem Steuerelement ermöglichen, mit dem eingegebenen Text zu wachsen und zu schrumpfen sowie zu verhindern, dass das Steuerelement zu groß oder zu klein wird.

Das maxlength-Attribut führt dazu, dass das Steuerelement nicht weiter in der Größe wächst, wenn das maximale Zeichenlimit erreicht ist.

Formale Definition

Formale Syntax

field-sizing = 
  fixed    |
  content  

Beispiele

Wachsende und schrumpfende Textfelder

Dieses Beispiel veranschaulicht die Wirkung von field-sizing: content auf ein- und mehrzeilige Textfelder. Die Felder passen ihre Größe an, wenn Text hinzugefügt oder entfernt wird. Sie umschließen den Inhalt effektiv, bis eine untere oder obere Größenbegrenzung erreicht ist.

HTML

Das HTML in diesem Beispiel enthält drei Formularfelder, jeweils mit einem zugeordneten <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 zum HTML:

• Die ersten beiden Felder haben ein maxlength-Attribut festgelegt, das das Wachsen des Feldes stoppt, wenn das Zeichenlimit erreicht ist.
• Das <textarea> wächst in der Inline-Richtung, bis die min-width-Beschränkung (festgelegt im CSS-Code unten) erreicht wird, und beginnt dann, in der Block-Richtung neue Zeilen hinzuzufügen, um nachfolgende Zeichen aufzunehmen.
• Das email-Eingabefeld hat einen Platzhalter gesetzt. Dies führt dazu, dass das Feld groß genug dargestellt wird, um den gesamten Platzhalter anzuzeigen. Sobald das Feld fokussiert wird und der Benutzer anfängt zu tippen, ändert sich die Feldgröße zum min-width-Wert. Das text-Feld, welches keinen Platzhalter hat, wird zunächst mit min-width gerendert.

CSS

Im CSS setzen wir field-sizing: content auf die drei Formularfelder neben einer min-width und max-width, um die Eingabegröße zu begrenzen. Wiederholenswert ist, dass die Felder ohne festgelegte Mindestbreite nur so breit wie der Textcursor gerendert werden würden.

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 den Feldern einzugeben und zu entfernen, um die Auswirkungen von field-sizing: content zusammen mit anderen Größeneinstellungen zu erkunden.

Steuerung der Anzeige von <select>-Elementen

Dieses Beispiel veranschaulicht die Wirkung von field-sizing: content auf <select>-Elemente, sowohl Dropdown-Menütypen als auch mehrzeilige Listenfeldtypen.

HTML

Das HTML enthält zwei Sätze von <select>-Elementen: eines mit field-sizing: content angewendet und eines ohne, sodass 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 Listenfeldtyp (mit gesetztem multiple-Attribut).

<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 wird field-sizing: content nur auf den ersten Satz der <select>-Elemente angewendet.

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 Effekte von field-sizing: content:

• Das Dropdown-Menü passt immer die Größe an den angezeigten Optionswert an und ändert die Größe, wenn verschiedene Optionen ausgewählt werden. Ohne field-sizing: content ist die Größe fixiert und so breit wie die längste Option.
• Das Mehrfachauswahl-Listenfeld zeigt alle Optionen auf einmal an. Ohne field-sizing: content muss der Benutzer die Box scrollen, um alle Optionen anzuzeigen.

Spezifikationen

Browser-Kompatibilität

Siehe auch

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