CSS new property Field-sizing can make input, textarea and select adapt to their content

Introducing field-sizing

field-sizing is a new CSS property that enables inputs, textareas, and selects to automatically scale to the size of their content.

• fixed , which is the current behavior for inputs, text areas, and selections, where they have a fixed size regardless of content.
• content , causes the form element to scale to the size of the content

When you apply it to an input or select, it will scale to the width of the content. When you apply it to a textarea, it will scale to the height of the content.

Example

<input
  type="text"
  placeholder="input"
  value="this sizes to its content"
/>

<style>input {
  field-sizing: content;
}
</style>

<textarea>
Here is a
Multiline
Textarea
</textarea>


<style>
 textarea {
  field-sizing: content;
  width: 200px;
}
</style>

Things to note

• It is part of CSS Basic User Interface Module Level 4, is still in editor draft status (meaning things can and will change), and is currently a Chromium-exclusive feature. However, I expect it to come to other browsers at some point this year, and Safari has already sent out positive signals, with Firefox likely to follow suit.
• Besides the lack of browser support, you also need to make sure your input, select, or textarea has some boundaries. If you don't, it will just keep growing. You can do this by setting max-width or max-height on the element
• Likewise, add min-width to your input and selection if you don't want it to shrink to the width of spaces or points.

The above is the detailed content of CSS new property Field-sizing can make input, textarea and select adapt to their content. For more information, please follow other related articles on the PHP Chinese website!