Firefox、Safari、chiromeでテキストエリアのリサイズをCSSで制御

CSS2012年4月23日

Firefox4.0からはデフォルトでテキストエリアのサイズをユーザーが自由にリサイズできるようになっています。
これは何もしなければ縦にも横にもいくらでもリサイズできるので、こういった挙動が好ましくない場合は、CSSで制御することができます。

縦・横ともにリサイズ可能（特にCSSの指定なし）

textarea.textarea-01{
}

textarea.textarea-02{
resize:vertical;
}

textarea.textarea-03{
resize:horizontal;
}

textarea.textarea-04{
resize:none;
}

div.hoge{
width:498px;
height:80px;
resize:both;
border:1px solid #ccc;
overflow:scroll;
}

考え方としては、縦横両方とも可変不可能にするのはユーザーの期待する挙動を裏切る可能性を高めてしまうので、対応するとしても縦可変のみ有効にさせておくのがベターかもしれません。

以前、この対応を知らずに「横可変できないようにしてくれ」とおっしゃったクライアントに「できません」と突っぱねてしまった後、調べたら対応できることに気づき、謝罪したことがありますm（_ _）m

ちなみにIEは全て（IE6～IE9）このテキストエリアのリサイズにブラウザが対応していません。よってresizeプロパティもサポートされていないようです。

この記事にコメントする