CSS3 textarea要素のリサイズを制御する。

2011.05.09 Mon

textarea要素とは、複数行のテキストを入力するエリアを作成するHTMLタグのことです。例えば、コメント欄ですね。

Firefox 4.0以降、Safari 3.0以降、Google Chrome 1.0以降では、そのテキストエリアをリサイズすることができます。Internet ExplorerやOperaではリサイズに対応していません。

下の画像のように右下にあるマークをドラッグすることによってテキストエリアのサイズを変更することができます。

Firefox

Safari、Google Chrome

でも、このリサイズの機能であるresizeプロパティは、なぜかデフォルトでリサイズができる状態になっていて、制御しないとデザインやレイアウトの崩れが起きます。

もしそれを避けたいのであれば、CSSでテキストエリアのリサイズを制御することができます。

<リサイズを無効にする>

textarea {
  resize: none;
}

<幅のリサイズだけを可能にする>

textarea {
  resize: horizontal;
}

<高さのリサイズだけを可能にする>

textarea {
  resize: vertical;
}

Twitterではこの高さのリサイズだけを可能にするようにCSSで制御していますね。
他だとFacebookではリサイズを無効にするようにしています。

個人的に自由にリサイズされるのが嫌だったので、このブログでもコメント欄のリサイズを制御してます。


no comments

leave a comment




comment