Firefoxや、Google Chrome、Safari辺りでいつの間にやら実装された、textarea のリサイズ機能はとても便利で良いなーとは思ってますが、止めたい時も有りますよね。

なので、止める方法を。

CSS3にそれっぽいプロパティが有るので、1行書くだけです。

textarea {
    resize: none;
}

こんな感じですね。
これは、ユーザー側で要素のリサイズ機能を許可するかしないかってプロパティなので、別にtextareaに限らず、overflowプロパティの値がvisible以外の指定が有る場合に使っていける感じです。

これだけだと、寂しいのでエントリーっぽくするために。


textarea以外に使うとしたら、トップページの新着情報みたいなので時々見る、高さ固定して overflow: auto; とかでスクロールバー出してる場合とかに使っていけばユーザー側でリサイズ出来るので良いかも知れません。
その場合は、次のような感じです。

#newsArea {
    resize: vertical;
    overflow: auto;
    height: 100px;
}

一応実際のサンプルも適当に用意してみました。
あ、リサイズ機能が有るブラウザで見てやってください。

resize: none;

resize: both;

resize: horizontal;

resize: vertical;

こんな感じで制御できるので、横幅だけ止めるればレイアウトの破綻にならずに良いかも知れませんね。

そんな小ネタ メモエントリー。
あ、でも久々にCSSネタだ!

参考: