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>
表示

リンク

Copyright (C) 2025 杜甫々
初版：2025年2月2日、最終更新：2025年2月2日
https://www.tohoho-web.com/css/prop/field-sizing.htm