field-sizing

content

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

fixed

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

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 expandieren, wenn sie maximale Größengrenzen erreichen (definiert durch die Größe ihres enthaltenden Elements oder über CSS festgelegt), an welchem Punkt ein Scrollen erforderlich ist, um allen Inhalt zu sehen.

Speziell field-sizing auf content beeinflusst die folgenden Elemente:

• Formulareingabetypen, die direkte Texteingabe von Benutzern akzeptieren. Dies umfasst die Typen email, number, password, search, tel, text und url.
  • Wenn keine Mindestbreite auf das Steuerelement gesetzt wird, wird es nur so breit wie der Textcursor sein.
  • Steuerelemente mit placeholder Attributen werden groß genug gerendert, um den Platzhaltertext anzuzeigen.
  • Das size Attribut ändert die standardmäßige bevorzugte Größe solcher <input> Elemente. Im Ergebnis hat size keine Wirkung auf <input> Elemente, bei denen field-sizing: content gesetzt ist.
• 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, wird sich das Steuerelement so ändern, dass es den Dateinamen umschließt.
• <textarea> Steuerelemente. Es ist erwähnenswert, dass <textarea> Elemente mit field-sizing: content sich ähnlich wie einzeilige Textsteuerelemente verhalten, mit den folgenden Ergänzungen:
  • Wenn <textarea> Elemente nicht in der Lage sind, aufgrund einer Breitenbeschränkung zu wachsen, werden sie beginnen in der Höhe zu wachsen, um zusätzliche Zeilen des Inhalts darzustellen. Wenn dann eine Höhenbeschränkung erreicht wird, werden sie ein Rollbalken anzeigen, um den gesamten Inhalt sichtbar zu machen.
  • rows und cols Attribute ändern die standardmäßig bevorzugte Größe eines <textarea>. Im Ergebnis haben rows/cols keine Wirkung auf <textarea> Elemente, bei denen field-sizing: content gesetzt ist.
• <select> Steuerelemente. Diese verhalten sich ein wenig anders, als Sie vielleicht erwarten würden, wenn field-sizing: content gesetzt ist. Die Wirkung hängt von der Art des <select> Steuerelements ab, das Sie erstellen:
  • Reguläre Dropdown-Boxen werden ihre Breite ändern, um den angezeigten Wert immer anzupassen, wenn neue Werte ausgewählt werden. (Standardmäßig wird die Größe des Dropdowns so festgelegt, dass sie den längsten Optionswert anzeigt.)
  • Listenfelder (<select> Elemente mit dem multiple oder size Attribut) werden groß genug sein, um alle Optionen ohne Scrollen anzuzeigen. (Standardmäßig erfordert die Dropdown-Box ein Scrollen, um alle Optionswerte anzuzeigen.)
  • Das size Attribut hat sehr wenig Wirkung auf <select> Elemente, die field-sizing: content gesetzt 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 erscheinen soll. Es wird jedoch immer alle Optionen eines Listenfelds anzeigen, auch wenn size kleiner als die Anzahl der Optionen ist.

Die durch field-sizing: content bereitgestellte Flexibilität zur Größenanpassung von Formularelementen kann überschrieben werden, wenn Sie andere CSS-Größeneigenschaften verwenden. Vermeiden Sie es, eine feste width und height zu verwenden, wenn Sie field-sizing: content verwenden, da sie eine feste Größe auf das Steuerelement zurücksetzen werden. Die Verwendung von Eigenschaften wie min-width und max-width zusammen mit field-sizing: content ist effektiv, da sie es dem Steuerelement ermöglichen, mit dem eingegebenen Text zu wachsen und zu schrumpfen und es auch daran hindern, zu groß oder zu klein zu werden.

Das maxlength Attribut verursacht, dass das Steuerelement aufhört zu wachsen, wenn die maximale Zeichenanzahl 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, während Text hinzugefügt oder entfernt wird, effektiv, bis eine untere oder obere Größengrenze erreicht wird.

HTML

Das HTML in diesem Beispiel enthält drei Formularfelder, jedes 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. [email protected]" />
</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 gesetzt, das das Wachstum der Feldgröße stoppt, wenn die Zeichenbegrenzung erreicht ist.
• Das <textarea> wird in der Inline-Richtung wachsen, bis das Ende der min-width Einschränkung (im untenstehenden CSS-Code gesetzt) erreicht ist, und dann beginnen, neue Zeilen in der Blockrichtung hinzuzufügen, um nachfolgende Zeichen zu enthalten.
• Das email Eingabefeld hat einen Platzhalter gesetzt. Dies verursacht, dass das Feld groß genug gerendert wird, um den gesamten Platzhalter anzuzeigen. Sobald das Feld fokussiert ist und der Benutzer beginnt, Text einzugeben, ändert das Feld seine Größe zum Wert von min-width. Das text Feld, das keinen Platzhalter hat, rendert initially bei min-width.

CSS

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

Wir geben den <label>s auch ein rudimentäres 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 Effekte von field-sizing: content zusammen mit anderen Größeigenschaften zu erkunden.

Dieses Beispiel zeigt 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: einen mit field-sizing: content angewandt, und einen ohne, um Ihnen den Unterschied zu zeigen (obwohl der Effekt weniger offensichtlich sein mag als bei Textfeldern). Jeder Satz enthält einen Dropdown-Menütyp und einen mehrzeiligen Listenfeldtyp (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 wird 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;
}

select {
  valign: top;
}

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

Ergebnis

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

• Das Dropdown-Menü passt immer die Größe des angezeigten Wertes an und ändert die Größe, sobald verschiedene Optionen ausgewählt werden. Ohne field-sizing: content ist die Größe so festgesetzt, dass sie so breit ist wie die längste Option.
• Das Mehrfachauswahl-Listenfeld zeigt alle Optionen auf einmal. Ohne field-sizing: content muss der Benutzer das Feld scrollen, um alle Optionen zu sehen.

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