textareaのresizableプロパティを無効にするにはどうすればよいですか?

textarea`のresizableプロパティを無効にしたいのですが。

現在、textarea の右下隅をクリックしてマウスをドラッグすることで、textarea のサイズを変更することができます。これを無効にするにはどうしたらよいでしょうか。

.

ソリューション

以下のCSSルールは、textarea要素のリサイズ動作を無効にします。

textarea {
  resize: none;
}

一部の(すべてではない)textareaでこの動作を無効にするには、いくつかのオプションがあります。

name属性がfooに設定されている特定のtextareaを無効にするには (例:<textarea name="foo"> ### 超重要なお知らせです。 このプロパティは、overflowプロパティがほとんどの要素のデフォルトであるvisible以外の値でない限り、何もしません。そのため、一般的にこのプロパティを使用するには、overflow: scrollのように設定する必要があります。

Chris Coyier氏による引用です。 http://css-tricks.com/almanac/properties/r/resize/

解説 (6)

CSSでは ...

textarea {
    resize: none;
}
解説 (0)

CSS 3には、これを可能にするUI要素の新しいプロパティが用意されています。そのプロパティとは、resize propertyのことです。そこで、スタイルシートに次のように追加して、すべてのtextarea要素のサイズ変更を無効にします。

textarea { resize: none; }

これはCSS 3のプロパティです。ブラウザの互換性を確認するには互換性チャートを使用してください。

個人的には、textarea要素でサイズ変更が無効になっていると非常に困ると思います。これは、デザイナーがユーザーのクライアントを壊そうとしている状況の一つです。もしあなたのデザインがより大きなtextareaに対応できないのであれば、あなたのデザインがどのように機能しているのかを考え直した方がいいでしょう。どのユーザーも、自分のユーザースタイルシートに textarea { resize: both !important; } を追加して、あなたの好みを上書きすることができます。

解説 (1)