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），大家可以再下面的输入框随便写点什么内容：
是不是可以看到，输入框的宽度紧跟着文字内容多少变化了？
二、语法速览
语法很简单，就下面这几个属性值：
field-sizing: content; field-sizing: fixed;
其中：
fixed是默认值，表示尺寸固定。content表示尺寸根据内容多少进行变化。
没什么好讲的。
三、补充说明
一些补充说明：
- 当输入框设置了
field-sizing:content声明的时候，原本会影响尺寸的size属性就会变得无效。 - textarea元素的
rows和cols属性也会无效。 field-sizing属性也可以用在<select>元素上。- 实际使用的时候，可以配合
min-width和max-width属性限制输入框的最小尺寸和最大尺寸。避免内容过多的时候，影响排版布局。
四、打道回府
好了，其实就这么点内容，我觉得这个特性还是有点用处的。
最后，兼容性：
Safari已经明确支持了。
好，就这么多！感谢阅读，欢迎点赞，转发。