feat: Editorial review: Add content to cover the field-sizing property

files/en-us/web/css/field-sizing/index.md

@@ -0,0 +1,246 @@
+---
+title: field-sizing
+slug: Web/CSS/field-sizing
+page-type: css-property
+browser-compat: css.properties.field-sizing
+---
+
+{{CSSRef}}{{seecompattable}}
+
+The **`field-sizing`** [CSS](/en-US/docs/Web/CSS) property sets the sizing behavior of elements that by default are given a default preferred size — i.e. form control elements. `field-sizing` enables this behavior to be overridden so that controls are instead sized to fit their contents.
+
+This property is typically used to create text [inputs](/en-US/docs/Web/HTML/Element/input) and {{htmlelement("textarea")}}s that shrinkwrap their content and grow as more text is entered.
+
+## Syntax
+
+```css
+/* 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;
+```
+
+### Values
+
+- `content`
+  - : Affected elements are sized to fit their contents.
+- `fixed`
+  - : Affected elements are sized with a fixed preferred size.
+
+## Description
+
+`field-sizing: content` overrides the default preferred sizing of form elements, providing an easy way to create text inputs that shrinkwrap their content and grow as more text is entered, only stopping their growth and requiring scrolling to view all the content when maximum size limits are reached (i.e. their containing elements' size, or a size set on them via CSS).
+
+Specifically, this property affects the following elements:
+
+- Form input types that accept direct text input from users: This includes [`email`](/en-US/docs/Web/HTML/Element/input/email), [`number`](/en-US/docs/Web/HTML/Element/input/number), [`password`](/en-US/docs/Web/HTML/Element/input/password), [`search`](/en-US/docs/Web/HTML/Element/input/search), [`tel`](/en-US/docs/Web/HTML/Element/input/tel), [`text`](/en-US/docs/Web/HTML/Element/input/text), and [`url`](/en-US/docs/Web/HTML/Element/input/url) types.
+  - If no minimum width is set on the control, it will only be as big as the text cursor.
+  - Controls with [`placeholder`](/en-US/docs/Web/HTML/Element/input#placeholder) attributes set will be rendered large enough to display the placeholder text.
+  - The [`size`](/en-US/docs/Web/HTML/Element/input#size) attribute modifies the default preferred size of such `<input>`s. As a result, `size` has no effect on `<input>` elements with `field-sizing: content` set.
+- [`file`](/en-US/docs/Web/HTML/Element/input/file) inputs: Direct text input is not possible, but the filename display changes as the user selects a new file to upload, which will change the control size if `field-sizing: content` is set.
+- {{htmlelement("textarea")}} controls: It is worth noting that `<textarea>` elements with `field-sizing: content` set behave much like single-line text controls do, with the following additions:
+  - If `<textarea>`s are unable to grow due to a width constraint, they will start to grow in height to display additional rows of content. When a height constraint is then reached, they will then start to show a scrollbar to allow all the content to be viewed.
+  - [`rows`](/en-US/docs/Web/HTML/Element/textarea#cols) and [`cols`](/en-US/docs/Web/HTML/Element/textarea#cols) attributes modify the default preferred size of a `<textarea>`. As a result, `rows`/`cols` have no effect on `<textarea>` elements with `field-sizing: content` set.
+- {{htmlelement("select")}} controls: These behave a bit differently to what you might expect with `field-sizing: content` set. The effect depends on the type of select control you are creating:
+  - Regular drop-down select boxes will change width to always fit the displayed option value, as new values are selected. (By default, the drop-down would be sized large enough to display the longest option value.)
+  - List boxes (`<select>`s with the [`multiple`](/en-US/docs/Web/HTML/Element/select#multiple) or [`size`](/en-US/docs/Web/HTML/Element/select#multiple) attributes set) will be large enough to display all the options without needing to scroll. (By default, the drop-down would require scrolling to view all the option values.)
+  - The [`size`](/en-US/docs/Web/HTML/Element/select#size) attribute has very little effect on `<select>` elements that also have `field-sizing: content` set on them. In such cases, the browser will check whether `size` is equal to `1` or not to determine whether the select should be a drop-down or a listbox, but it will always display all the options of a listbox even if `size` is smaller than the number of options.
+
+### Sizing controls with CSS
+
+The sizing imposed on form controls by `field-sizing: content` can be overidden by CSS sizing properties. It doesn't really make sense to set {{cssxref("width")}} and {{cssxref("height")}} because that will reimpose a fixed size on the control, but using properties like {{cssxref("min-width")}} and {{cssxref("max-width")}} work well alongside `field-sizing: content`, allowing the control to grow and shrink with the entered text without getting too big or small.
+
+It is also useful to combine these properties with form attributes like [`maxlength`](/en-US/docs/Web/HTML/Element/input#maxlength), which will cause the control to stop growing in size when the maximum character limit is reached.
+
+## Formal definition
+
+{{cssinfo}}
+
+## Formal syntax
+
+{{csssyntax}}
+
+## Examples
+
+### Growing/shrinking text fields
+
+This example illustrates the effect of `field-sizing: content` on single- and multi-line text fields — they change size as text is added and removed, in effect shrinkwrapping the contents, until an lower or upper size limit is reached.
+
+#### HTML
+
+Our HTML contains three form fields with associated {{htmlelement("label")}}s — `<input>`s of type [`text`](/en-US/docs/Web/HTML/Element/input/text) and [`email`](/en-US/docs/Web/HTML/Element/input/email) respectively, and a {{htmlelement("textarea")}}.
+
+```html
+<div>
+  <label for="text">Enter name:</label>
+  <input type="text" id="text" 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="textarea">Enter comment:</label>
+  <textarea id="textarea" maxlength="400">This is a comment.</textarea>
+</div>
+```
+
+Note how:
+
+- The fields have a [`maxlength`](/en-US/docs/Web/HTML/Element/input#maxlength) attribute set, which works usefully alongside `field-sizing: content` — the size of the field will stop increasing when the character limit is reached.
+- The `<textarea>`'s `maxlength` is bigger than that of the other two fields. The result is that the `<textarea>` will grow in the inline direction until the edge of the {{cssxref("min-width")}} constraint is reached, then start to add new lines in the block direction until the `maxlength` limit is reached.
+- The `email` input has a placeholder set. This causes the field to render big enough to show the entire placeholder. Once the field is focused and the user starts typing, the field changes size to the {{cssxref("min-width")}} set in the CSS. The `text` field, which doesn't have a placeholder, renders initially at the `min-width`.
+
+#### CSS
+
+In the CSS, we set `field-sizing: content` on the three form fields, along with a {{cssxref("min-width")}} and {{cssxref("min-width")}} to constrain the input size. It is worth reiterating that, if no minimum width is set on the field, they will only be rendered as big as the text cursor.
+
+We also give the `<label>`s some rudimentary styling so that they sit neatly next to the fields.
+
+```css hidden
+body {
+  box-sizing: border-box;
+  padding: 20px;
+}
+
+div {
+  margin-bottom: 20px;
+  display: flex;
+}
+```
+
+```css
+input,
+textarea {
+  field-sizing: content;
+  min-width: 50px;
+  max-width: 350px;
+}
+
+label {
+  width: 150px;
+  margin-right: 20px;
+  text-align: right;
+}
+```
+
+#### Result
+
+The output looks like this. Try entering and removing text in a supporting browser to get a feel of the effects of `field-sizing: content`.
+
+{{ EmbedLiveSample('Growing/shrinking text fields', '100%', '200') }}
+
+### Controlling select element display
+
+This example illustrates the effect of `field-sizing: content` on {{htmlelement("select")}} elements, both drop-down menu types and multiline listbox types.
+
+#### HTML
+
+Our HTML contains two sets of `<select>` elements — one that will have `field-sizing: content` applied to it, and one that won't — so you can see the difference (the effect is a bit less obvious than on text fields). Each set contains one drop-down menu type and multiline listbox type (with the [`multiple`](/en-US/docs/Web/HTML/Element/select#multiple) attribute set).
+
+```html
+<div class="field-sizing">
+  <h2>With field-sizing: content</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 field-sizing: content</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
+
+In the CSS, we set `field-sizing: content` on the first set of `<select>` elements only.
+
+```css hidden
+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;
+}
+```
+
+```css
+.field-sizing select {
+  field-sizing: content;
+}
+```
+
+#### Result
+
+The output looks like this.
+
+{{ EmbedLiveSample('Controlling select element display', '100%', '150') }}
+
+Note the effects of `field-sizing: content`:
+
+- The drop-down menu always fits the size of the displayed option, changing size as different options are selected. Without `field-sizing: content`, the size is fixed as big as the longest option.
+- The multi-select list box displays all of the options at once. Without `field-sizing: content`, the user has to scroll the box to view all the options.
+
+## Specifications
+
+{{Specifications}}
+
+## Browser compatibility
+
+{{Compat}}
+
+## See also
+
+- {{htmlelement("input")}}
+- {{htmlelement("select")}}
+- {{htmlelement("textarea")}}

files/en-us/web/html/element/input/index.md

@@ -961,6 +961,12 @@ input.custom {
 
 {{EmbedLiveSample('caret-color', 500, 80)}}
 
+### field-sizing
+
+The {{cssxref("field-sizing")}} property sets the sizing behavior of form control elements, i.e. by default they are given a default preferred size. `field-sizing` enables this behavior to be overridden so that controls are instead sized to fit their contents.
+
+This property is typically used to create form fields that shrinkwrap their content and grow as more text is entered. This works with input types that accept direct text input (for example [`text`](/en-US/docs/Web/HTML/Element/input/text) and [`url`](/en-US/docs/Web/HTML/Element/input/url)), {{htmlelement("textarea")}} elements, and input type [`file`](/en-US/docs/Web/HTML/Element/input/url).
+
 ### object-position and object-fit
 
 In certain cases (typically involving non-textual inputs and specialized interfaces), the `<input>` element is a [replaced element](/en-US/docs/Web/CSS/Replaced_element). When it is, the position and size of the element's size and positioning within its frame can be adjusted using the CSS {{cssxref("object-position")}} and {{cssxref("object-fit")}} properties

files/en-us/web/html/element/select/index.md

@@ -131,8 +131,9 @@ For more useful information on styling `<select>`, see:
 
 - [Styling HTML forms](/en-US/docs/Learn/Forms/Styling_web_forms)
 - [Advanced styling for HTML forms](/en-US/docs/Learn/Forms/Advanced_form_styling)
+- The {{cssxref("field-sizing")}} property, which controls how `<select>` elements are sized in relation to their contained options.
 
-Also see the "Customizing select styles" example below for an example of you could attempt a simple `<select>` styling.
+Also see the "Customizing select styles" example below, which shows how you could attempt a simple `<select>` styling.
 
 ## Examples