テキストエリアのリサイズ機能を CSS で制御する
Firefox はテキストエリアの右下をドラッグすると、テキストエリアの幅や高さをリサイズできる。
ブラウザのデフォルト機能で、ユーザやウェブサイト作成者が制御できるものではないと思っていたが、CSS で resize というプロパティを使うと制御できる様子。
以下にサンプルを置いてみた。
水平方向のみ、垂直方向のみのリサイズ、なども制御できる。min-width や max-height との併用も可能。
ただ、Firefox と Chrome で動作が若干違った。Firefox はコードどおりの直感的な動作をした。が、Chrome は width・height プロパティがあればその値を min 値と見なすようで、min-width・min-height のサイズまで縮められなかった。width・height が書かれていない場合はデフォルト表示より縮めることができなかった。
そして、IE11 はそもそもテキストエリアがリサイズできない。resize プロパティもサポートされていない。
どうやら resize プロパティ自体はテキストエリア以外にも使える様子。有効な使い方がイマイチ湧かないけど、とりあえず覚えておこう。