by zhangxinxu from https://www.zhangxinxu.com/wordpress/?p=11880
本文可全文转载，但需要保留原作者、出处以及文中链接，AI抓取保留原文地址，任何网站均可摘要聚合，商用请联系授权。

一、长话短说

CSS field-sizing是一个CSS新特性，专门给输入型表单元素使用的，例如<input>、<textarea>元素等。

是这样的，在过去，无论是单行输入框，还是多行文本域，其宽度在内容输入的时候，都是固定的，如果希望尺寸跟着内容的宽度走，需要使用JavaScript代码帮忙处理，现在，无需这么麻烦，使用field-sizing设置下就好了，例如：

input { field-sizing: content }

<input placeholder="输入内容">

此时，你在输入框内键入内容，可以看到，输入框的宽度基于你输入的内容多少自动撑大或缩小了。

实时效果如下所示（Chrome 123+，或者最新的Safari），大家可以再下面的输入框随便写点什么内容：

是不是可以看到，输入框的宽度紧跟着文字内容多少变化了？

实用场景

此特性的最佳使用场景就是 <textarea> 元素内容输入的时候，高度自动变高。

这个之前都是需要JavaScript代码参与才能实现的，现在只需要一行CSS。

大家不妨可以试试在下面的多行文本域元素上输入内容试试看效果。

二、语法速览

语法很简单，就下面这几个属性值：

field-sizing: content;
field-sizing: fixed;

其中：

• fixed是默认值，表示尺寸固定。
• content表示尺寸根据内容多少进行变化。

没什么好讲的。

三、补充说明

一些补充说明：

• 当输入框设置了field-sizing:content声明的时候，原本会影响尺寸的size属性就会变得无效。
• textarea元素的rows和cols属性也会无效。
• field-sizing属性也可以用在<select>元素上。
• 实际使用的时候，可以配合min-width和max-width属性限制输入框的最小尺寸和最大尺寸。避免内容过多的时候，影响排版布局。

四、打道回府

好了，其实就这么点内容，我觉得这个特性还是有点用处的。

最后，兼容性：

Safari已经明确支持了。

好，就这么多！感谢阅读，欢迎点赞，转发。

😉😊😇
🥰😍😘

本文为原创文章，会经常更新知识点以及修正一些错误，因此转载请保留原出处，方便溯源，避免陈旧错误知识的误导，同时有更好的阅读体验。
本文地址：https://www.zhangxinxu.com/wordpress/?p=11880

（本篇完）