CSS Property field-sizing: content – automatic form fields sizing without javascript

Introduction

In modern web development, interface adaptability is crucial, especially for input forms. Users expect input fields to conveniently adjust to entered text without unnecessary scrolls or fixed sizes. The CSS property field-sizing: content addresses this by allowing form elements to automatically resize based on content. This experimental property, introduced in the CSS Form Control Styling Level 1 specification, is relevant for enhancing user experience in forms where input dynamics play a key role. In this article, we will cover syntax, values, usage examples, and browser compatibility.

Table of Contents

• Syntax and Values
• Affected Elements
• Interaction with Other Properties
• Usage Examples
• Browser Compatibility
• Conclusion

Syntax and Values

The field-sizing property applies to elements with a default preferred size, such as form fields. Its syntax is straightforward:

field-sizing: content | fixed | inherit | initial | revert | revert-layer | unset;

Key values:

Value	Description
fixed	Fixed size (default value). The element does not adjust to content.
content	The element adjusts to fit its content, expanding or shrinking automatically.

Formal definition:

• Initial value: fixed.
• Inherited: no.
• Animation type: discrete.

This property enables an easy "shrinkwrap" effect for text fields.

Affected Elements

field-sizing: content affects the following form elements:

• Text inputs (types: text, email, password, etc.): The field shrinks to cursor width but displays placeholder fully. The size attribute is ignored.
• Textarea: Behaves like a single-line field, grows in height upon reaching width, then shows a scrollbar. rows and cols attributes have no effect.
• Select: For dropdowns – fits the selected option; for multiples – displays all options without scroll.
• File input: Adjusts to the selected file name.

Interaction with Other Properties

The property can be overridden by fixed width and height, but pairs well with min-width, max-width, min-height, and max-height for growth control. The maxlength attribute halts expansion at the character limit. This enables flexible yet controlled forms.

Usage Examples

Example 1: Dynamic Text Field

Here's a simple example for input and textarea:

In this example, the field expands as text is entered but does not exceed 350px.

Example 2: Adjusting Select

Here, the select changes width to fit the selected option.

Browser Compatibility

As an experimental property, support is limited:

Browser	Support from Version
Chrome	122+
Edge	122+
Firefox	122+
Safari	No
Opera	108+
Android Browser	No
iOS Safari	No

Check current compatibility on MDN before use.

Conclusion

The CSS property field-sizing: content simplifies creating adaptive forms by allowing elements to auto-adjust to content. This enhances UX, particularly in mobile interfaces. Despite its experimental status and limited compatibility, it holds promise for future projects. Use it with fallbacks for older browsers to ensure cross-browser support.