field-sizing CSS property

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

Für diese Eigenschaft wird einer der folgenden Schlüsselwortwerte angegeben:

content

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

fixed

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

Beschreibung

field-sizing: content überschreibt die bevorzugte Standardgröße von Formularelementen. Damit lassen sich Texteingabefelder so konfigurieren, dass sie sich ihrem Inhalt anpassen und mitwachsen, wenn weiterer Text eingegeben wird. Sie wachsen nicht mehr weiter, sobald sie ihre maximale Größe erreicht haben (die durch die Größe ihres umgebenden Elements oder per CSS festgelegt wird). Ab diesem Punkt muss gescrollt werden, um den gesamten Inhalt zu sehen.

Von field-sizing: content betroffene Elemente

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

• Formulareingabetypen, bei denen Benutzer direkt Text eingeben können. Dazu gehören die Typen email, number, password, search, tel, text und url.
  • Ist für das Steuerelement keine Mindestbreite festgelegt, ist es nur so breit wie der Textcursor.
  • Steuerelemente mit einem placeholder-Attribut werden groß genug dargestellt, um den Platzhaltertext anzuzeigen.
  • Das size-Attribut verändert die bevorzugte Standardgröße solcher <input>-Elemente. Daher hat size keine Auswirkung auf <input>-Elemente, für die field-sizing: content festgelegt ist.
• Eingabefelder des Typs file. Eine direkte Texteingabe ist hier nicht möglich. Der angezeigte Dateiname ändert sich jedoch, wenn Benutzer eine neue Datei zum Hochladen auswählen. Ist field-sizing: content festgelegt, passt das Steuerelement seine Größe an den Dateinamen an.
• <textarea>-Steuerelemente. <textarea>-Elemente, für die field-sizing: content festgelegt ist, verhalten sich weitgehend wie einzeilige Textsteuerelemente, allerdings mit folgenden Besonderheiten:
  • Können <textarea>-Elemente aufgrund einer Breitenbeschränkung nicht weiter in die Breite wachsen, wachsen sie stattdessen in die Höhe, um zusätzliche Textzeilen anzuzeigen. Sobald auch eine Höhenbeschränkung erreicht ist, erscheint eine Bildlaufleiste, über die sich der gesamte Inhalt anzeigen lässt.
  • Die Attribute rows und cols verändern die bevorzugte Standardgröße eines <textarea>-Elements. Daher haben rows und cols keine Auswirkung auf <textarea>-Elemente, für die field-sizing: content festgelegt ist.
• <select>-Steuerelemente. Ist field-sizing: content festgelegt, verhalten sie sich möglicherweise anders als erwartet. Die Auswirkung hängt von der Art des <select>-Steuerelements ab:
  • Gewöhnliche Dropdown-Listen ändern ihre Breite bei der Auswahl eines neuen Werts so, dass der angezeigte Optionswert hineinpasst. (Standardmäßig ist die Dropdown-Liste breit genug für den längsten Optionswert.)
  • Listenfelder (<select>-Elemente mit dem Attribut multiple oder size) sind groß genug, um alle Optionen ohne Scrollen anzuzeigen. (Standardmäßig muss gescrollt werden, um alle Optionswerte zu sehen.)
  • Das size-Attribut hat auf <select>-Elemente mit field-sizing: content nur geringe Auswirkungen. In diesem Fall prüft der Browser, ob size gleich 1 ist, um zu bestimmen, ob das <select>-Steuerelement als Dropdown-Liste oder als Listenfeld angezeigt werden soll. Ein Listenfeld zeigt jedoch immer alle Optionen an, auch wenn size kleiner als die Anzahl der Optionen ist.

Zusammenspiel von field-sizing mit anderen Größenangaben

Die Größenanpassung, die field-sizing: content für Formularsteuerelemente ermöglicht, kann durch andere CSS-Eigenschaften zur Größenfestlegung außer Kraft gesetzt werden. Vermeiden Sie bei der Verwendung von field-sizing: content feste Werte für width und height, da diese dem Steuerelement wieder eine feste Größe vorgeben. Eigenschaften wie min-width und max-width lassen sich dagegen gut mit field-sizing: content kombinieren: Das Steuerelement kann mit dem eingegebenen Text wachsen und schrumpfen, ohne zu groß oder zu klein zu werden.

Das Attribut maxlength bewirkt, dass das Steuerelement nicht weiter wächst, sobald die maximale Zeichenanzahl erreicht ist.

Formale Definition

Formale Syntax

field-sizing = 
  fixed    |
  content  

Beispiele

Wachsende und schrumpfende Textfelder

Dieses Beispiel zeigt die Auswirkung von field-sizing: content auf ein- und mehrzeilige Textfelder. Die Felder passen ihre Größe an, wenn Text hinzugefügt oder entfernt wird, bis eine untere oder obere Größengrenze erreicht ist.

HTML

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

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

Beachten Sie zum HTML Folgendes:

• Für die ersten beiden Felder sind keine Längenbeschränkungen festgelegt.
• Für das dritte Feld (vom Typ tel) ist ein maxlength-Attribut festgelegt. Dadurch wächst das Feld nicht weiter, sobald die maximale Zeichenanzahl erreicht ist.
• Das <textarea> wächst in Inline-Richtung, bis die durch min-width vorgegebene Grenze erreicht ist (die im folgenden CSS-Code festgelegt wird). Danach werden für weitere Zeichen neue Zeilen in Block-Richtung hinzugefügt.
• Für das email-Eingabefeld ist ein Platzhalter festgelegt. Dadurch wird das Feld zunächst groß genug dargestellt, um den gesamten Platzhaltertext anzuzeigen. Sobald das Feld den Fokus erhält und Benutzer mit der Eingabe beginnen, ändert sich seine Größe auf den Wert von min-width. Das text-Feld hat keinen Platzhalter und wird von Anfang an mit der Breite von min-width dargestellt.

CSS

Im CSS legen wir für die drei Formularfelder field-sizing: content sowie min-width und max-width fest, um ihre Größe zu begrenzen. Ohne eine Mindestbreite wären die Felder nur so breit wie der Textcursor.

Außerdem versehen wir die <label>-Elemente mit einer einfachen Gestaltung, damit sie ordentlich neben den Feldern stehen.

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

Geben Sie in den folgenden Feldern Text ein und entfernen Sie ihn wieder, um die Auswirkungen von field-sizing: content zusammen mit anderen Eigenschaften zur Größenfestlegung zu sehen.

Anzeige von <select>-Elementen steuern

Dieses Beispiel zeigt die Auswirkung von field-sizing: content auf <select>-Elemente, sowohl bei Dropdown-Listen als auch bei mehrzeiligen Listenfeldern.

HTML

Das HTML enthält zwei Gruppen von <select>-Elementen: eine mit field-sizing: content und eine ohne. So können Sie den Unterschied erkennen, auch wenn er möglicherweise weniger deutlich ist als bei Textfeldern. Jede Gruppe enthält eine Dropdown-Liste und ein mehrzeiliges Listenfeld (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 für die erste Gruppe von <select>-Elementen festgelegt.

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:

• Die Größe der Dropdown-Liste passt sich stets an die angezeigte Option an und ändert sich, wenn eine andere Option ausgewählt wird. Ohne field-sizing: content bleibt ihre Breite fest und richtet sich nach der längsten Option.
• Das Listenfeld mit Mehrfachauswahl zeigt alle Optionen gleichzeitig an. Ohne field-sizing: content müssen Benutzer im Listenfeld scrollen, um alle Optionen zu sehen.

Spezifikationen

Browser-Kompatibilität

Siehe auch

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