Home > Web Front-end > CSS Tutorial > CSS new property Field-sizing can make input, textarea and select adapt to their content

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

Patricia Arquette
Release: 2024-09-21 06:31:41
Original
1054 people have browsed it

CSS 新属性Field-sizing,可以使input 、 textarea和select自适应其内容

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>
Copy after login
<textarea>
Here is a
Multiline
Textarea
</textarea>


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

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!

source:dev.to
Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Latest Articles by Author
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template