くまだどうも、くまだです。
field-sizingプロパティのメモ。
field-sizingとは？
field-sizingは、フォームの入力欄のサイズの決まり方を制御するCSSプロパティです。
field-sizing: contentを指定すると、入力内容に合わせて要素が自動的にリサイズされます。テキストを入力するほど高さが伸び、削除すると縮む、あの動きがCSSだけで実現できます。
コードは以下になります。
textarea {
field-sizing: content;
}min-height / max-heightと組み合わせる
field-sizing: contentだけだと、テキストが1文字もないときに高さがゼロになってしまいます。最小の高さを確保したいときはmin-heightを組み合わせましょう。
textarea {
field-sizing: content;
min-height: 100px;
max-height: 300px;
}min-heightで最初の高さを確保しつつmax-heightで上限も設定できます。max-height を超えた場合は自動的にスクロールが有効になるので、デザインが崩れる心配もありません。
inputにも使える
field-sizing: content は textarea だけでなくinput にも使えます。input に指定した場合は、入力内容に合わせて横幅が伸縮します。
input[type="text"] {
field-sizing: content;
min-width: 120px;
max-width: 400px;
}ここまで読んでくださりありがとうございました。