読者です 読者をやめる 読者になる 読者になる

Corredor

ウェブ、プログラミングの勉強メモ。

テキストエリアのリサイズ機能を CSS で制御する

Firefox はテキストエリアの右下をドラッグすると、テキストエリアの幅や高さをリサイズできる。

ブラウザのデフォルト機能で、ユーザやウェブサイト作成者が制御できるものではないと思っていたが、CSS で resize というプロパティを使うと制御できる様子。

以下に CodePen でサンプルを置いてみた。

See the Pen Resizeable Textarea by Neos21 (@Neos21) on CodePen.

水平方向のみ、垂直方向のみのリサイズ、なども制御できる。min-widthmax-height との併用も可能。

ただ、Firefox と Chrome で上記の CodePen の動作が若干違った。Firefox はコードどおりの直感的な動作をした。が、Chrome は widthheight プロパティがあればその値を min 値と見なすようで、min-widthmin-height のサイズまで縮められなかった。widthheight が書かれていない場合はデフォルト表示より縮めることができなかった。

そして、IE11 はそもそもテキストエリアがリサイズできない。resize プロパティもサポートされていない。

どうやら resize プロパティ自体はテキストエリア以外にも使える様子。有効な使い方がイマイチ湧かないけど、とりあえず覚えておこう。

参考