CSS field-sizing
Historically, crafting well-sized input fields on the web was a complex task. Developers often had to guess the right size for input fields or use complicated coding tricks to make them change size as people typed. This old way of doing things took a lot of time and often led to fields that didn’t look right or work well for users.
Enter field-sizing, a revolutionary CSS property that simplifies the process of creating adaptive and visually pleasing form elements. With just one simple line of code, you can make your input fields automatically grow or shrink to fit the text that people type into them.
How it Works
Simply apply the field-sizing property with a value of content to the desired elements:
textarea, select, input {
field-sizing: content;
}
This declaration instructs the browser to dynamically calculate the optimal size for the field based on the length of the content. The result is a seamless and user-friendly experience, where the field expands or contracts as needed, eliminating the need for scrolling or truncation.
The field-sizing property can be set to fixed or content. The default value is fixed, which maintains the current behavior of form controls having a constant size, regardless of the amount of text entered. The content value disables the constant size behavior, allowing the size to be determined by the content.
This property can be applied to various form controls, such as textareas, text fields, number fields, file inputs, select boxes, and drop-down boxes.
Chromestatus: https://chromestatus.com/feature/5176596826161152
Comments
Reply on Bluesky here to join the conversation.