CSS - field-sizing

概要

属性名	field-sizing
値	fixed \| content
初期値	fixed
適用可能要素	`<input>` や `<textarea>` などのデフォルトサイズを持つ要素
継承	継承しない
サポート	https://caniuse.com/mdn-css_properties_field-sizing

説明

<input type="text"> や <textarea> などデフォルトのサイズを持つ要素に対して、サイズを固定長にするか、コンテンツのサイズに従って拡大・縮小するかを指定します。Chrome, Edge, Opera ではサポートされています。2025年1月時点の Firefox 137 や Safari 18.3 ではまだサポートされていません。

fixed: 固定長とします。デフォルト値です。
content: コンテンツのサイズに応じて拡大・縮小します。

使用例

CSS

.my-field-sizing-test {
  field-sizing: content;
  min-width: 3rem;
}

HTML

<div><input class="my-field-sizing-test" type="text"></div>
<div><textarea class="my-field-sizing-test"></textarea></div>

表示

リンク

初版：2025年2月2日、最終更新：2025年2月2日

https://www.tohoho-web.com/css/prop/field-sizing.htm